Lightweight jQuery Sticky Navigation With Scrollspy - Stickymenu.js

Lightweight jQuery Sticky Navigation With Scrollspy - Stickymenu.js
File Size: 6.58 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Stickymenu.js is a lightweight and easy-to-use jQuery plugin for creating a sticky navigation menu that automatically updates links based on scroll position. Click on the links in the navigation list to slide vertically and smoothly through html content within the document.

Basic usage:

1. Create an html unordered list of links for the sticky navigation.

<ul class="nav">
  <li class="active"><a href="#section1">Section1</a></li>
  <li><a href="#section2">Section2</a></li>
  <li><a href="#section3">Section3</a></li>
  <li><a href="#section4">Section4</a></li>
  <li><a href="#section5">Section5</a></li>
</ul>

2. Create content sections with corresponding CSS classes.

<div class="section section1">
  <p class="title">Section1</p>
</div>
<div class="section section2">
  <p class="title">Section2</p>
</div>
<div class="section section3">
  <p class="title">Section3</p>
</div>
<div class="section section4">
  <p class="title">Section4</p>
</div>
<div class="section section5">
  <p class="title">Section5</p>
</div>

3. Add jQuery library and the jQuery Stickymenu.js script to your webpage.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="src/jquery.stickymenu.js"></script>

4. Active the plugin and specify the CSS selectors.

$(".nav").stickymenu({
  "stickyBarSelector": ".nav",
  "menuItemSelector": "li",
});

5. All available configs with default values.

$(".nav").stickymenu({

  // scrolling speed in ms
  "speed": 500,

  // active class
  "activeClass": "active",

  // top offset in pixels
  "menuTop": 0,

  // callback
  "onItemSelected": null,

  // CSS selectors
  "stickyClass": "sticky",
  "menuItemSelector": "a",
  "stickyBarSelector": null,    

  // height of the sticky navigation    
  "stickyBarHeight": null
  
});

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