BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
Advertisements

Bootstrap ScrollSpy

In this tutorial you will learn how to create scrollspy with Bootstrap.

Creating ScrollSpy with Bootstrap

The Bootstrap scrollspy is a navigation mechanism that automatically highlights the nav links based on the scroll position to indicate the visitor where they are currently on the page. The scrollspy will make your web page more elegant and accessible, if you are using the bookmark links for directing the visitors to the different sections of a page that has a huge amount of content.

Here's a typical example of Bootstrap scrollspy.

<body data-spy="scroll" data-offset="15" data-target="#myScrollspy">
    <div class="container">
        <div class="row">
            <div class="col-sm-3" id="myScrollspy">
                <div class="list-group">
                    <a class="list-group-item list-group-item-action active" href="#section1">Section One</a>
                    <a class="list-group-item list-group-item-action" href="#section2">Section Two</a>
                    <a class="list-group-item list-group-item-action" href="#section3">Section Three</a>
                </div>
            </div>
            <div class="col-sm-9">
                <div id="section1">
                    <h2>Section One</h2>
                    <p>This is section one content...</p>
                </div>
                <hr>
                <div id="section2">
                    <h2>Section Two</h2>
                    <p>This is section two content...</p>
                </div>
                <hr>
                <div id="section3">
                    <h2>Section Three</h2>
                    <p>This is section three content...</p>
                </div>
            </div>
        </div>
    </div>
</body>

Note: The Bootstrap scrollspy plugin requires the use of a Bootstrap nav component (e.g. navbar, nav tabs or pills) for proper highlighting of active links.


Creating ScrollSpy via Data Attributes

You can easily add scrollspy behavior to your topbar navigation via data attributes without writing a single line of JavaScript code. Let's check out the following example:

<body data-spy="scroll" data-offset="60" data-target="#myNavbar">
    <nav id="myNavbar" class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <div class="container">
            <a href="#" class="navbar-brand">Navbar</a>
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="nav navbar-nav">
                    <li class="nav-item">
                        <a href="#section1" class="nav-link">Section 1</a>
                    </li>
                    <li class="nav-item">
                        <a href="#section2" class="nav-link">Section 2</a>
                    </li>
                    <li class="nav-item">
                        <a href="#section3" class="nav-link">Section 3</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Section 4<b class="caret"></b></a>
                        <div class="dropdown-menu">
                            <a href="#section4dot1" class="dropdown-item">Section 4.1</a>
                            <a href="#section4dot2" class="dropdown-item">Section 4.2</a>
                            <a href="#section4dot3" class="dropdown-item">Section 4.3</a>
                        </div>
                    </li>
                    <li>
                        <a href="#section5" class="nav-link">Section 5</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <div id="section1">
            <h2>Section 1</h2>
            <p>This is section 1 content...</p>
        </div>
        <hr>
        <div id="section2">
            <h2>Section 2</h2>
            <p>This is section 2 content...</p>
        </div>
        <hr>
        <div id="section3">
            <h2>Section 3</h2>
            <p>This is section 3 content...</p>
        </div>
        <hr>
        <h2>Section 4</h2>
        <p>This is section 4 content</p>
        <div id="section4dot1">
            <h3>Section 4.1</h3>
            <p>This is section 4.1 content...</p>
        </div>
        <div id="section4dot2">
            <h3>Section 4.2</h3>
            <p>This is section 4.2 content...</p>
        </div>
        <div id="section4dot3">
            <h3>Section 4.3</h3>
            <p>This is section 4.3 content...</p>
        </div>
        <hr>
        <div id="section5">
            <h2>Section 5</h2>
            <p>This is section 5 content...</p>
        </div>
    </div>
</body>

You might be thinking what this code was all about. Ok, let's go through each part of this scrollspy code one by one for a better understanding.

Explanation of Code

The Bootstrap scrollspy has basically two components — the target nav (e.g. navbar, nav tabs or pills) and the scrollable area to spy on, which is often the <body> section.

  • The data-spy="scroll" attribute (line no-01) is applied to the scrollable element that is being spied on, which is the <body> element.
  • The data-target attribute is added on the scrollable element with the ID or class of the parent element of the Bootstrap .nav component so that nav links can be targeted by the scrollspy for highlighting purpose.
  • The optional data-offset attribute specifies the number of pixels to offset from top when calculating the position of scroll. Adjust the offset value if the targeted links are highlighting too early or too late. The default value is 10 pixels.

Rest of the thing is self explanatory, such as the .navbar element specifies a Bootstrap navbar, the element <div id="section1"></div> (line no-33) create a bookmark with the id attribute, whereas the element <a href="#section1">Section 1</a> (line no-17) add a link to this bookmark, from within the same page, and so on.


Creating ScrollSpy via JavaScript

You may also add scrollspy manually using the JavaScript — just call the scrollspy() Bootstrap method with the id or class selector of the navbar in your JavaScript code.

<script>
$(document).ready(function(){
    $("body").scrollspy({
        target: "#myNavbar",
        offset: 70
    }) 
});
</script>

Options

There are certain options which may be passed to scrollspy() Bootstrap method to customize the functionality of a scrollspy.

Name Type Default Value Description
offset number 10 Number of pixels to offset from top when calculating position of scroll.
method string auto Finds which section the spied element is in. The value auto will choose the best method get scroll coordinates. Whereas, the value offset will use jQuery offset method to get scroll coordinates, and the value position will use jQuery position method to get scroll coordinates.
target string Specifies element to apply Scrollspy plugin.

You can also set this options for scrollspy using the data attributes — just append the option name to data-, like data-offset="0", data-method="position", and so on.


Methods

These are the standard bootstrap's 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 this:

<script>
$(document).ready(function(){
    $('[data-spy="scroll"]').each(function(){
        var $spy = $(this).scrollspy('refresh');
    }); 
});
</script>

Events

Bootstrap's scrollspy class includes few events for hooking into scrollspy functionality.

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

The following example displays an alert message to the user when a new item becomes highlighted by the scrollspy.

<script>
$(document).ready(function(){
    $("#myNavbar").on("activate.bs.scrollspy", function(){
        var currentItem = $(".nav li.active > a").text();
        $("#info").empty().html("Currently you are viewing - " + currentItem);
    })
});
</script>
Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.