Bootstrap scrollspy

Bootstrap scrollspy is a plugin which shows on the navigation list current position on the page depends on the scroll position defined by the user.

Scroll down to see the effect

section1

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.

section2

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.

section3

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.

                
<!-- Nav tabs -->
<ul id="navbar-example2" class="nav nav-tabs nav-justified indigo mb-4 mx-0">
    <li class="nav-item">
        <a class="nav-link active" href="#panel1">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#panel2">Follow</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#panel3">Contact</a>
    </li>
</ul>
<h4>Scroll down to see the effect</h4>
<!--Spied element-->
<div class="scrollspy-example z-depth-1 mt-4" data-spy="scroll" data-target="#navbar-example2" data-offset="0">
    <h4 id="panel1" class="font-bold">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="panel2" class="font-bold">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="panel3" class="font-bold">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-->


.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.

Live Demo

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">
    <ul class="nav smooth-scroll clearfix d-none d-sm-flex flex-column">
        <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="".

Name	Type	Default	Description
offset	number	10	Pixels to offset from the top when calculating the position of scroll.

Events

Event Type	Description
activate.bs.scrollspy	This event fires whenever a new item becomes activated by the scrollspy.


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