jQuery Based Sticky Navigation with Smooth Scroll Support - stickynav

Just another jQuery sticky navigation plugin that features smooth scroll and smart anchor link highlighting.

Features:

• Stick your navigation to the top of the browser window.
• Smoothly scroll to specified content section as you click on anchor links.
• Auto highlight anchor links based on scroll position.

How to use it:

1. Download the jQuery stickynav plugin and place the stickynav.js script after jQuery JavaScript library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/stickynav.js"></script>

2. Create a site navigation with anchor links pointing to the content sections of your web page.

<div id="container">
  <nav id="nav">
    <ul>
      <li><a id="nav_section1" class="active" href="#section_1">Section 1</a></li>
      <li><a id="nav_section2" href="#section_2">Section 2</a></li>
      <li><a id="nav_section3" href="#section_3">Section 3</a></li>
      <li><a id="nav_section4" href="#section_4">Section 4</a></li>
    </ul>
  </nav>
  <div class="section" id="section_1" style="color: #333333">
    <h1>Section 1</h1>
  </div>
  <div class="section" id="section_2" style="color: #474747">
    <h1>Section 2</h1>
  </div>
  <div class="section" id="section_3" style="color: #848484">
    <h1>Section 3</h1>
  </div>
  <div class="section" id="section_4" style="color: #c1c1c1">
    <h1>Section 4</h1>
  </div>
</div>

3. Make the site navigation sticky at the top of the web page.

.sticky {
  position: fixed;
  z-index: 100;
}

---

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