Whilst scoping out a project recently, I found myself needing the ability to provide users with an indicator of their progress as they scrolled down a page. The pages were comprised of tall, full-width sections, making it quite an effort to reach a particular section or navigate content in general.
I had a bit of a search around but couldn’t find a third-party service that provided this in a dynamic, reusable way. I ended up creating my own, which is now accessible from my Github page.
The core functionality is that it creates a progress indicator bar on the fly, with a circle to represent each section that is marked with the ’pt-section’ class. This bar then updates as a user scrolls down to indicate what section they are currently in; simple! The plugin is also capable of deep-linking between sections when you click on a circle, displaying info about each section based on data-attributes, show and hide the indicator if the desired sections are only at one point on a page, and a few other things that are detailed on the Github page.
There is an example HERE to give you a vague idea how it operates, and if you get any issues, just shout me!