Minimal jQuery Scrollspy & Smooth Scroll Plugin - eavesdrop.js

Just another jQuery scrollspy plugin for one page scroll website that tracks the position of DOM elements and activates certain nav items when scrolling down or up. Also supports URL hashtags and smooth scrolling between DOM elements.

How to use it:

1. Create several content sections for your one page scrolling website.

<div class="one full eavesdrop">1</div>
<div class="two full eavesdrop">2</div>
<div class="three full eavesdrop">3</div>
<div class="four full eavesdrop">4</div>

2. Create a navigation to scroll through these content sections.

<ul class="nav">
  <li><a href="#one">1</a></li>
  <li><a href="#two">2</a></li>
  <li><a href="#three">3</a></li>
  <li><a href="#four">4</a></li>
</ul>

3. Download the plugin and include the jquery.eavesdrop.min.js script along with jQuery library at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.eavesdrop.min.js"></script>

4. Initialize the plugin and done.

$('.nav').eavesdrop();

5. The plugin will automatically add a CSS class 'active' to active menu item. So that you can style the active menu item in the CSS.

.nav li.active {
  ...
}

.nav li.active a {
  ...
}

6. Default plugin options.

$('.nav').eavesdrop({
  watchClass: 'eavesdrop',
  activeClass: 'active',
  trackUrl: true
});

---

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