Javascript Simple Scrollspy Sticky Navigation Plugin

Do you want to build a one-page website? And looking to implement fixed or sticky navigation? This javascript simple Scrollspy navigation plugin allows you to build it quickly.

Using readymade plugins means you are going to save a lot of time and fast the work progress. If you are short of time and want to deliver the work quickly then such plugins help a lot.

It’s a simple and lightweight Javascript library which applies the Scrollspy functionality to one-page scrolling website.

The plugin automatically adds the ‘active’ class to the navigation links when the page is scrolled to its corresponding section.

Let’s Implement Scrollspy Plugin to Make Sticky Navigation

Let’s download the zip and insert the Javascript file simple-scrollspy.js before closing the header tag or add it at the end of the footer element.

<script src="simple-scrollspy.js"></script>

Next, you need to create a regular navigation menu. Just make sure to place the menu links inside the div with class name menu and ID main-menu.

Each anchor link should have a class menu-item and define the anchor section name class name with # as follows:

<div class="menu" id="main-menu">
    <a class="menu-item active" href="#hero">Home</a>
    <a class="menu-item" href="#section-1">Products</a>
    <a class="menu-item" href="#section-2">Team Members</a>
    <a class="menu-item" href="#section-3">About Us</a>
    <a class="menu-item" href="#section-4">Get in Touch</a>
</div>

Now its time to active the Scrollspy plugin and you need to initialize the Javascript function.

<script>
      window.onload = function () {
        scrollSpy('#main-menu', {
        })
      }
</script>

The pluign comes with few of possible options which allow you to customize it.

<script>
      window.onload = function () {
        scrollSpy('#main-menu', {
          sectionClass: '.scrollspy',
          menuActiveTarget: '.menu-item',
          offset: 100
        })
      }
    </script>

You can customize the styling of the menu bar by editing the style.css To customize the styles when a menu item is active, You need to edit the following class.

.menu-item.active {
 background: #00a8ff;
 color: #ffffff;
}

That’s It.