Reading Position

A reading position indicator to show how far you are on a page or beween two points

The most important thing to remember when implementing this reading-position indicator is that the target element needs to be a progress element or have the role progress on it.

Examples

Usage

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

						
@import url("@10up/reading-position");

						
import ReadingPosition from '@10up/reading-position';

 new ReadingPosition( '.reading-position', {
	onCreate: function() {
		console.log( 'onCreate callback' );
	},
	scrollStart: function( percentage ) {
		console.log( 'scrollStart callback', percentage );
	},
	scrollEnd: function( percentage ) {
		console.log( 'scrollEnd callback', percentage );
	},
	scrolling: function( percentage ) {
		console.log( 'scrolling callback', percentage );
	}
 } );

						

					

						
let myReadingPosition = new TenUp.readingPosition( '.reading-position', {
	onCreate: function() {
		console.log( 'onCreate callback' );
	},
	scrollStart: function( percentage ) {
		console.log( 'scrollStart callback', percentage );
	},
	scrollEnd: function( percentage ) {
		console.log( 'scrollEnd callback', percentage );
	},
	scrolling: function( percentage ) {
		console.log( 'scrolling callback', percentage );
	}
} );

						

					

* Standalone JS is used on projects that are not set up to handle ES6. To use this version you will need to download the compiled JavaScript from the component's dist directory and pull it into your project. The same process should be followed with the CSS if it cannot process through the NPM package.

Documentation

Installation

This component accepts two arguments, the progress element DOM Node and an object containing optional callbacks.

npm install @10up/reading-position --save

API

onCreate	Called after the reading position is initialized on page load.
scrollStart	Called when an accordion item is opened
scrolling	Called when an accordion item is closed
scrollEnd	Called when an accordion item is toggled

Class

Class used for this component
.reading-position	Class for the progress element.

Browser Compatibility

Chrome	Latest
Firefox	Latest
Edge	Latest
Safari	Latest
IE	11