Highlighting The Current Nav Link with jQuery and CSS

Highlighting The Current Nav Link with jQuery and CSS
File Size: 553 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Nav Highlighter is a simple jQuery script that updates navigation menu automatically when you scroll. The plugin detects the scroll position relative to the viewport, and applies a CSS class to the current nav link describing the current position. Also allows you to scroll to desired content sections with smooth scroll effect. Great for your landing page, single page website & web application.

How to use it:

1. Create a navigation menu for your webpage.

<ul class="navHighlighter">
  <li><a href="#scrollnav1">Section 1</a></li>
  <li><a href="#scrollnav2">Section 2</a></li>
  <li><a href="#scrollnav3">Section 3</a></li>
  <li><a href="#scrollnav4">Section 4</a></li>
</ul>

2. Create sectioned content with the corresponding CSS IDs.

<div id="scrollnav1">
  ...
</div>

<div id="scrollnav2">
  ...
</div>

<div id="scrollnav3">
  ...
</div>

<div id="scrollnav4">
  ...
</div>

3. Load the core JavaScript after your jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/script.js"></script>

4. Load the core JavaScript after your jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/script.js"></script>

5. The plugin will apply the class of 'nav-active' to the current nav link so that you can create any link highlighting effect in the CSS.

.nav-active {
  ...
}

Change log:

2015-03-13

  • updated the fixed nav to become sticky based on scroll percentage instead of hardcoded height

2015-03-02

  • update.

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