jQuery scrollspy plug-ins with demos

The scrollspy plug-in

If you have long content web pages with links within itself for letting users navigate through it then you may use a scrollspy plug-in for updating the links in navigation based on the position.

The links within the webpage’s content are created by using a “#” in the anchor tag.

I will show you such a plug-in which is based on jQuery and quite easy to use.

A demo of using scrollspy jQuery plug-in

In this demo, four links in the top and right navigations are created along with respective content for each link. As you scroll down, the related link will be highlighted in both navigations. For example, if you scroll down from red block to the blue, the “TWO” will be updated on top and “2” in the right navigation with green background. See the demonstration online:

jQuery scroll spy

See online demo and code

For setting up this plug-in, simply add the normalize and main CSS files in the <head> section that is packaged with the downloaded zipped file. (You may download it from Github website).

 <link rel=”stylesheet” href=”css/eavesdrop/normalize.css”>

<link rel=”stylesheet” href=”css/eavesdrop/main.css”>

Just above the </body> tag, place the jQuery library and scrollspy plug-in JS file:

 <script src=”https://code.jquery.com/jquery-1.12.0.min.js”></script>

<script src=”js/eavesdrop/jquery.eavesdrop.min.js”></script>

Initiate the plug-in in the jQuery code section:

<script type="text/javascript">

$(document).ready(function(){

$('.top-nav').eavesdrop();

$('.nav-fixed').eavesdrop();

});

</script>

 

Note, the .top-nav and .nav-fixed classes are used in the markup section within div elements. These are also used in the CSS file for specifying different properties. If you change it, then take care of the style section accordingly.

See the complete code on the demo page.

A demo using in real one-page web template

To show you the real use of a plug-in like this, have a look at a free template which is available to download freely in this website. There, the plug-in is used for the top navigation that is highlighted as you scroll down to the different sections of the theme.

Initially, the home link is highlighted, as you scroll down the “What we do” menu item will highlight which is followed by Testimonials and so on. In addition, if you click on any link from the top navigation, not only it will move to related section but the address bar will also hide the “#” text of menu items.

You may visit this free template here and download the complete code by visiting this post.