🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Page Content Navigation is a super tiny jQuery plugin that adds a sticky sidebar navigation to your modern one page scrolling website and web application.

One-Page-Scrolling

Documentation

Page Content Navigation

Add scrolling navigation to page content. Requires jQuery 1.7+.

Tested support: Chrome, Firefox, Safari.

Setup

Include jQuery (1.7+) and the Page Content Navigation plugin files.

<!-- Page Content Navigation Stylesheet --> <link rel="stylesheet" href="page-content-navigation/page-content-navigation.css">  <!-- Page Content Navigation jQuery Plugin --> <script src="page-content-navigation/page-content-navigation.js"></script>

Call the plugin on elements to which you want to add scrolling navigation.

// simple $( '.navigable' ).contentNavigation();  // custom settings $( '.navigable' ).contentNavigation({   includeTopNav: false,   offsetIndicator: '-33%' });

Settings

Setting Type Default Description
includeTopNav boolean false Include an extra navigation button to scroll users to the top of the page.
offsetIndicator integer or string 0 Number of pixels (integer value) or percentage of the window height (string value) above (negative value) or below (positive value)* the actual top of a navigation element when the navigation button switches to its "on state."

*Note: using a positive offsetIndicator value will result in strange behavior where clicking a navigation button scrolls the user to the top of an element but does not switch the button to its "on state," due to this offset. Typically, this is not desirable.


You May Also Like