Sticky

mrSticky relies on the ScrollMonitor plugin.

1. Include the library in your page

   • Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.js and before theme.js.

     <!-- ScrollMonitor (manages events for elements scrolling in and out of view) -->
     <script type="text/javascript" src="assets/js/scrollMonitor.js"></script>

     Alternatively you may wish to load this resource from a CDN to potentially improve page load times.

     <!-- ScrollMonitor (manages events for elements scrolling in and out of view) -->
     <script type="text/javascript" src="https://unpkg.com/scrollmonitor@~1.2.4"></script>

2. Load the initializer code in index.js

   • Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.

     import mrSticky from './sticky';

   • Ensure the following line appears in the export object:

     export {
     mrSticky,
     };

Elements such as <nav>s can stick to viewport top with the addition of the data-sticky="top" attribute.

To stick a <nav> to the top of the window, it must be wrapped in a div.navbar-container.

<div class="navbar-container">
  <nav class="navbar" data-sticky="top">
    ...
  </nav>
</div>

To make other elements sticky, add data-sticky="below-nav". The element will then scroll with the page, and stick below the main nav. If the sticky element has a <section> ancestor the element will un-stick and scroll out of view with the ancestor.