Bootstrap scrollspy

The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.

<div class="scroll-box">

<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-3 red horizontal-spy" id="navbar-example2" role="navigation">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#section1" role="tab">section1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#section2" role="tab">section2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#section3" role="tab">section3</a>
    </li>
</ul>

<div style="height: 60px"></div>

<h4>Scroll down to see the effect</h4>
<hr>

<!--Spied element-->
<div class="scrollspy-example z-depth-1" data-spy="scroll" data-target="#navbar-example2" data-offset="0">
    <h4 id="section1">section1</h4>
    <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo
        booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus,
        cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
    <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo
        booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus,
        cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
    <h4 id="section2">section2</h4>
    <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck,
        mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
    <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo
        booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus,
        cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
    <h4 id="section3">section3</h4>
    <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo
        park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
    <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo
        booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus,
        cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</div>
<!--/.Spied element-->

</div>

.scroll-box {
position: relative;
}
.scrollspy-example {
position: relative;
overflow-y: scroll;
height: 200px; 
}

Usage

Requires Bootstrap nav

Scrollspy currently requires the use of a Bootstrap .nav component for proper highlighting of active links.

Requires relative positioning

No matter the implementation method, scrollspy requires the use of position: relative; on the element you’re spying on. In most cases this is the <body>. When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.

Via data attributes

To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Via JavaScript

After adding position: relative; in your CSS, call the scrollspy via JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Resolvable ID targets required

Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

Non-:visible target elements ignored

Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted.

Dotted Scrollspy

Making the navigation more informative and intuitive is still a challenge to most of the developers.

Thanks to dotted ScrollSpy, this issue is simply resolved with a use of a sticking elements that indicate on which part of the page your users are and how much longer they can expect the website to be.

Another invaluable option coming with dotted ScrollSpy is the ability to swiftly switch between desired parts of your webpage with just one click.

HTML

<section id="one"></section>
<section id="two"></section>
<section id="three"></section>
<section id="four"></section>
<section id="five"></section>
<section id="six"></section>

<!-- Scrollspy -->
<div class="dotted-scrollspy hidden-sm-down">
    <ul class="nav smooth-scroll">
        <li class="nav-item"><a class="nav-link" href="#one"><span></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#two"><span></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#three"><span></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#four"><span></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#five"><span></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#six"><span></span></a></li>
    </ul>
</div>

Javascript

$('body').scrollspy({
    target: '.dotted-scrollspy'
});

Methods

.scrollspy('refresh')

When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like so:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

Events

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})