momentum.js

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:

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.