Activate Nav Links Based On The Scroll Position - jQuery headerHighlight.js

headerHighlight.js is a small jQuery based scrollspy plugin which adds an Active class to nav links when the page is scrolled pass their sections.

Useful for one page scroll web app that highlights the links in a sticky nav when the user scrolls through the long content.

How to use it:

1. Create content sections on your one page scroll web app.

<section id="section-1" class="section">
  Section #01
</section>
<section id="section-2" class="section">
  Section #02
</section>
<section id="section-3" class="section">
  Section #03
</section>
...

2. Create nav links pointing to these sections:

<ul id="nav">
  <li>
    <a href="#section-1" class="nav-link">
      Link 1
    </a>
  </li>
  <li>
    <a href="#section-2" class="nav-link">
      Link 3
    </a>
  </li>
  <li>
    <a href="#section-3" class="nav-link">
      Link 3
    </a>
  </li>
  ...
</ul>

3. Include jQuery library and the jQuery headerHighlight.js plugin at the bottom of the webpage.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="jquery.headerhighlight.js"></script>

4. Call the function on the nav links. Possible parameters:

• elementsChanging: the selector of nav links
• currentClass: active class
• offset: the offset to trigger the scrollspy behavior

$('.section').headerhighlight({
  elementsChanging: $('.nav-link'),
  currentClass: 'nav-active',
  offset: 0
});

5. Highlight the active nav link using your own styles:

.nav-link.nav-active {
  font-weight: bold;
}

---

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