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

Menu & Nav
File Size: 481.05 KB
Views Total: 482 views
Last Update:May 31, 2023
Publish Date: August 30, 2016
Official Website: Go to website
License: MIT
Plugin Author: nadezhda-serafimova
Demo    Download

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.

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

Initialize the plugin script.


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 > {
  color: blue;

Available plugin options.

  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'


Thanks for make jQuery plugin is developed by nadezhda-serafimova For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :


Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.