Bootstrap 3 Scrollspy

Bootstrap's Scrollspy allows you to automatically update nav targets based on scroll position.

Scrollspy allows you to highlight the current position in a menu, based on the user's scroll position. As the user scrolls down the page, the applicable menu item is highlighted, based one where the scroll position is.

Scrollspy Example

Here's an example of Scrollspy in action. Scroll down the page/frame and see each menu item highlighted as you reach the corresponding position in the page:

<style scoped="true">
article.scrollspy-example { 
position: relative;
overflow: scroll; 
width: 350px;
height: 160px;
}
</style>

  <nav id="scrollspy-nav" class="navbar navbar-default">
    <ul class="nav nav-pills">
      <li class="nav-item"><a class="nav-link" href="#bast">About</a></li>
      <li class="nav-item"><a class="nav-link" href="#brogan">Products</a></li>
      <li class="nav-item"><a class="nav-link" href="#calceology">Contact</a></li>
    </ul>
  </nav>
  <article data-spy="scroll" data-target="#scrollspy-nav" data-offset="0" class="scrollspy-example">
    <h4 id="bast">About Us</h4>
    <p>We've been selling all sorts of stuff to do with feet since we started.</p>
    <p>Long story short...</p>
    <p>(That is all).</p>
    <h4 id="brogan">Products</h4>
    <p>We have all sorts of products, including, but not limited to:</p>
    <ul>
        <li>Boots</li>
        <li>Shoes</li>
        <li>Socks</li>
        <li>Bootstraps</li>
    </ul>
    <h4 id="calceology">Contact Us</h4>
    <p>Do you really think we'd give out our contact details? </p>
    <p>No... really?</p>
    <p>Alright! Here they are:</p>

    <ol>
        <li>Walk north</li>
        <li>Turn right at the corner</li>
        <li>Turn right at the next corner</li>
        <li>Then right again</li>
        <li>Then walk back to where you started.</li>
    </ol>
</article>

Relative Positioning

Scrollspy requires the use of position: relative; on the element being spied on.

This is most commonly the <body> element, so you can apply it to that element. However, when spying on other elements, you'll need to have a height set and overflow-y: scroll; applied.