Here we are solving a basic problem faced by a beginner web developer in bootstrap i.e. designing scrollspy in bootstrap .

Objectives and Outcomes

In this, we will discuss about designing scrollspy in bootstrap

Scrollspy

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.

Code


<body data-spy="scroll" data-target="#myNavbar" data-offset="70">
    <nav id="myNavbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> 
                    <span class="sr-only">Toggle navigation</span> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                </button>
                <a class="navbar-brand" href="#">Scrollspy</a>
            </div>
            <!-- Collection of nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#section1">Section 1</a></li>
                    <li><a href="#section2">Section 2</a></li>
                    <li><a href="#section3">Section 3</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Section 4<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#section4dot1">Section 4.1</a></li>
                            <li><a href="#section4dot2">Section 4.2</a></li>
                            <li><a href="#section4dot3">Section 4.3</a></li>
                        </ul>
                    </li>
                    <li><a href="#section5">Section 5</a></li>
                </ul>
            </div>
        </div>
    </nav>
	<br><br>
    <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>


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.

1) The data-spy="scroll" attribute (line no-01) is applied to the scrollable element that is being spied on, which is the body element.

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

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