Scroll Progress Bar

mrReadingPosition 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 mrReadingPosition from './reading-position';

   • Ensure the following line appears in the export object:

     export {
     mrReadingPosition,
     };

There are two components to consider when creating a reading progress bar: the bar itself and the elements that will inform the position of the bar.

The bar's value is updated based on the user's scroll progress through the currently viewed [data-reading-position] element, even if there are more than one matching elements on the page.

Progress bar

This is the element that gives the visual indication of the user's progression through the current article.

Create a progress element and add class reading-position.

Any progress element on the page with class reading-position will be targeted by the script which will update the value of each element as the page is scrolled.

Set the value to 0 initially.

Although it is possible to use many bars, there should be only one bar visible on the page at any one time for aesthetic reasons.

<progress class="reading-position" value="0"></progress>

Article

Add the attribute data-reading-position to any element (usually an <article> element).

Scroll Behaviour

Downward scrolling

When the beginning of the article meets the top of the viewport, the progress bar will be shown and will increase as the user scrolls further through the article.

If there is another article following, the bar will return to 0 and the progress for the new bar will be shown instead.

Upward scrolling

If the user scrolls back upward, the bar will decrease. If another article is shown above, the progress will start back at 100 and wind down as the viewport reaches the top of the article.