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

Menu & Nav
jquery-stoocky-page
File Size: 481.05 KB
Views Total: 501 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.

<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

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

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.