Sticky Header + Smooth Scroll + Scrollspy = Stoocky Page

A versatile jQuery plugin helps you create easy-to-navigate landing pages, portfolio websites, and single page web applications.

Features:

• Sticky Header Nav: Ensures the header or navigation bar remains visible while scrolling.
• Smooth Scroll: Enables smooth and animated scrolling to specific content sections when users click on menu items.
• Scrollspy: Automatically highlights menu items based on the user's scroll position, offering a clear indication of the current section being viewed.

How to use it:

1. Add 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>

2. 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>

<section id="section-1">
  Section 1
</section>
<section id="section-2">
  Section 2
</section>
<section id="section-3">
  Section 3
</section>
...

3. Initialize the plugin.

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

4. 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;
}

5. 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'
  }
});

---

This awesome jQuery plugin is developed by nadezhda-serafimova. For more Advanced Usages, please check the demo page or visit the official website.