Sticky Header + Smooth Scroll + Scrollspy – jQuery-Stoocky-Page

The Sticky Header Smooth Scroll Spy is a jQuery plugin that allows for easy implementation of a fixed header that smoothly scrolls to different sections on a web page. It provides a simple and customizable way to enhance the user experience while navigating through a long page. The plugin uses scrollspy to highlight the active section in the header, and also includes options for adjusting the scroll speed and offset. Overall, it’s a great solution for websites that require a persistent navigation bar.
It’s easy to implement and can be customized to fit any design With customizable options for the header height, offset, and animation speed, this plugin offers a versatile solution for improving the user experience on your website. The smooth scrolling effect is achieved using jQuery easing functions, which provide a more polished and seamless user experience. Additionally, the plugin allows you to customize the header’s appearance and behavior to fit your website’s design and layout. Overall, this is a useful tool for improving navigation on your website and enhancing the user experience.

How to use :

Add jQuery and the minified version of the Stoocky Page plugin to the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.stoocky-page.js"></script>

Create a nav list that contains anchor links pointing to the content sections.

<nav>
  <ul class="main-menu">
    <li>
      <a href="javascript:;" data-item="section-1">Section 2</a>
    </li>
    <li>
      <a href="javascript:;" data-item="section-2">Section 2</a>
    </li>
    <li>
      <a href="javascript:;" data-item="section-3">Section 2</a>
    </li>
  </ul>
</nav>

Initialize the plugin script.

$(function(){ 
  $('body').stoockyPage();
});

The necessary CSS styles.

/* make the header nav sticky on scroll */
 .header {
  position: absolute;
}

.header.header--fixed {
  position: fixed;
  top: 0;
}

/* active styles */
.main-menu > li > a.active {
  color: blue;
}

Available plugin options.

$('body').stoockyPage({
  stickyElem   : {
    active            : true,
    elToFix           : 'header',
    classToFix        : 'header--fixed'
  },
  scrollToElem    : {
    active            : true,
    item              : '.main-menu > li > a',
    animDuration      : 1000,
  },
  itemHighlighter : {
    active            : true,
    item              : '.main-menu > li > a',
    lastItem          : '.main-menu > li:last-child > a',
    classToHighlight  : 'active'
  }
});

Done