Smart Responsive Sticky Navigation Menu With jQuery - stickyNav.js

The stickyNav.js jQuery plugin makes it possible to create a smart, sticky, mobile-friendly navigation menu for your cross-platform web application.

Main features:

• Always sticks the menu to the top when scrolling past it.
• Highlights the active menu item with an animated underline. Aka. scrollspy.
• Collapses the navigation into a drop-down menu on the mobile device.
• Smoothly scroll to specific page sections when clicking menu items.

See It In Action:

How to use it:

1. Create the navigation menu from a normal nav list.

<nav class="stickyMenu clearfix">
  <a class="btn btn-menu">Menu</a>
  <ul>
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
  </ul>
</nav>

2. Create page sections the page should be scrolled to. Note that the ID values must match the anchor links defined in the menu items.

<div id="section-1" class="tracked">
  Section 1
</div>

<div id="section-2" class="tracked">
  Section 2
</div>

<div id="section-3" class="tracked">
  Section 3
</div>

...

3. Download the plugin and load the main script after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="stickyNav.js"></script>

4. Initialize the plugin and make the nav menu sticky on scroll.

$('.stickyMenu').smoothMenu({
  stickyMenu: true,
  slidingLine: true
});

5. Override the default settings to customize the nav menu.

$('.stickyMenu').smoothMenu({

  // animation speed in ms
  menuSpeedAnimate:             600,
  pageNavigationSpeedAnimate:   1500,

  // class selector of menu trigger button
  btnClassMenu:                 'btn-menu',

  // enable sticky menu
  stickyMenu:                   false,

  // appends this class to sticky menu
  stickyMenuClassName:          'fixed',

  // enable sliding line under active menu item
  slidingLine:                  false,
  slidingLineClassName:         'sliding-line',
  slidingLineClassNameActive:   'active',
  slidingLineColor:             '#fcf8e3',
  slidingLineHeight:            '3px',
  slidingLineSpeedAnimate:      200,

  // breakpoint
  winMobWidth:                  500,

  // css selector of tracked section
  trackedClassName:             'tracked'
  
});

---

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