momentum.js

A lightweight jQuery progress bar plugin that shows how far down the page you are as you scroll
Aurora

momentum.js is a lightweight jQuery plugin that generates a customizable progress bar which attaches to your app's fixed-position nav element and measures how far down the page you are as you scroll.

Want to see a demo?

You're looking at it! Scroll down the page to see the progress bar in action.

By default, progress down the page is measured from the vertical center of the viewport. For this demo, we'll track scroll progress on the <main id="main-content"> wrapper around the main content of this page.

Get Started

Step 1:

Clone momentum.js into your project.

									
										git clone git@github.com:sschoepke/momentum.git your-project
									
								

- or -

Download the files and copy momentum.js into your project.

Step 2:

Be sure to include momentum.js after jQuery.

									
										<!-- Include jQuery and momentum.js -->
										<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
										<script src="js/momentum.js"></script>
									
								

Step 3:

Initialize momentum.js, passing in the selector for the element you want to track. Below is an example of basic implementation. See the Customization section for documentation on how to further customize the plugin.

									
										$('.my-class').momentum();
									
								

That's it!

By default the plugin will generate a progress bar and append it to your nav element, provided that it has been assigned the position: fixed property in your CSS.

Here's what the default progress bar looks like when appended to your navigation:

The minified version of momentum.js weighs in at a mere 1.66KB

Luner Lake

Customization

The momentum.js plugin can be easily customized to suit the needs of your application. The only requirement for it to work is jQuery and the selector for the element you want to track. This could be the entire body element or just a portion of the page such as <article class="content">.

This is the most simple implementation:

									
										$('.my-class').momentum();
									
								

Below is a list of optional parameters you can pass to the momentum() function to customize the plugin.

									
										// Defaults
										$('.my-class').momentum({
											barSelector: '',
											customCss: false,
											barColor: '#9e9e9e',
											thickness: 4,
											progressColor: '#42a5f5',
											offset: 'middle',
											minHeight: 0,
											fadeInOut: true
										});
									
								
  • Parameters

  • barSelectorstring(default: null)

    If no value is passed in the barSelector parameter, the function will look for a nav element with position: fixed, then generate a progress bar <div class="progress-bar"></div>, and append it to nav. However, for some projects you may need the progress bar to be located elsewhere or have a different class than the default. If that's the case, simply add a div to your markup with any class you like, then pass it to the function:

    											
    												<nav class="my-fixed-nav">
    													<div class="my-progress-bar"></div>
    												</nav>
    												<article class="my-class">
    													...
    												</article>
    											
    										
    											
    												.my-fixed-nav {
    													position: fixed;
    												}
    											
    										
    											
    												$('.my-class').momentum({
    													barSelector: '.my-progress-bar'
    												});
    											
    										
  • customCssboolean(default: false)

    You may wish to style the progress bar using your own CSS rather than the plugin defaults. If so, set customCss: true, then add styles for .progress-bar and .progress-amt.

    											
    												.progress-bar {
    													display: block;
    													position: absolute;
    													height: 4px;
    													width: 100%;
    													margin: -4px 0 0 0;
    													border-radius: 0;
    													background-color: #7986cb;
    												}
    												.progress-amt {
    													position: absolute;
    													top: 0;
    													left: 0;
    													bottom: 0;
    													background-color: #1de9b6;
    													transition: width .3s linear;
    												}
    											
    										
    											
    												$('.my-class').momentum({
    													customCss: true
    												});
    											
    										
  • barColorstring(default: '#9e9e9e')

    Set the color of the progress bar.

  • thicknessnumber(default: 4)

    Set the thickness of the progress bar.

  • progressColorstring(default: '#42a5f5')

    Set the color of the progress amount.

  • offsetstringnumberoptions: 'middle', 'top', 'bottom', int (default: 'middle')

    By default, the amount of scroll progress down the selected element is measured from the middle of the viewport. You may set this to 'top', 'bottom' or even a numeric value.

    											
    												$('.my-class').momentum({
    													offset: 'bottom'
    												});
    											
    										
    											
    												$('.my-class').momentum({
    													offset: 400
    												});
    											
    										
  • minHeightnumber(default: 0)

    Set the minimum height the selected element must be for the progress bar to activate. This is helpful, for example, if you're using it on articles of various lengths and you don't want the bar to show on the shorter ones.

  • fadeInOutboolean(default: true)

    By default, the progress bar is hidden and fades in when the offset approaches the top of the selected element. It then fades out again after the selected element is no longer in the viewport. To deactivate this behavior, set fadeInOut: false, which will make the bar visible at all times.

The element on the page that's being tracked for progress ends right here

Mountain