Step by step how to create an ScrollSpy NavBar with the Twitter Bootstrap

 In this article we'll build an ScrollSpy NavBar with the Twitter Bootstrap as a Menu. The ScrollSpy creates a dynamic Menu which will accompany the user as she/he scrolls down/up the contents of a web page. 

The Twitter Bootstrap includes many Plugins and widgets to import to your web page with a minimal design effort and with great responsiveness for mobile or tablet devices.

We'll need to have installed the Twitter Bootstrap. If you don't have it, learn  in this tutorial how to install it in just 2 minutes

In just 5 minutes we'll build a responsive web page with an ScrollSpy NavBar using the ScrollSpy plugin of the Twitter Bootstrap:

The Twitter Bootstrap can be reached & downloaded from the Bootstrap official site : Bootstrap :

Create an HTML web page or an MVC View, but make sure to load the CSS and the .js jQuery scripts in the page:

TWITTER BOOTSTRAP ScrollSpy NavBar

Go to the Bootstrap and take a look at the documentation of the ScrollSpy NavBar Plugin: 

As you can see, we must declare a "data-spy" and a "data-target" to make the example work.
Then paste the following code inside your MVC View or HTML markup:

 <div data-spy="scroll" data-target="#navbar-example" data-offset="0" class="scrollspy-frame">
                <h4 id="First">First Paragraph</h4>
                <div class="jumbotron">
                    <h2>The Twitter Bootstrap ScrollSpy Plugin</h2>
                    <p><a class="btn btn-default btn-lg" role="button">Learn more</a></p>
                </div>
                <p>...</p>
                <h4 id="Second">Second Paragraph</h4>
                <p>...</p>
                <h4 id="Third">Third Paragraph</h4>
                <p>...</p>
                <h4 id="Fourth">Fourth Paragraph</h4>
                <p>...</p>
                <h4 id="Fifth">Fifth Paragraph</h4>
                <p>...</p>
                <p>
                    ...
                </p>
                <h4 id="Sixth">Sixth Paragraph</h4>
                <p>...</p>
                <p>
                    ...
                </p>
            </div>

Those will be the contents which will be spied by the Menu NavBar. Take special care to declare the classes and the IDs of the elements, to make the whole example work. I remarked in red the necessary declarations. Now create the NavBar using the following code, and customize it after you check that it works perfectly well in your web page:

 <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
                <div class="container-fluid">                   
                    
                        <ul class="nav navbar-nav">
                            <li><a href="#First">First Paragraph</a></li>
                            <li><a href="#Second">Second Paragraph</a></li>
                            <li><a href="#Third" tabindex="-1">Third Paragraph</a></li>
                            <li class="dropdown">
                                <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
                                    
                                    <li><a href="#Fourth" tabindex="-1">Fourth Paragraph</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#Fifth" tabindex="-1">Fifth Paragraph</a></li>
                                    <li><a href="#Sixth" tabindex="-1">Sixth Paragraph</a></li>
                                </ul>
                            </li>
                        </ul>
                     
                </div>
            </nav>

Also add some CSS , part of which is a must:

.scrollspy-frame {
    color: #FFF;
    position: relative;
    height: 250px;
    margin-top: 10px;
    overflow: auto;
}

The position must be set to "relative", and "Overflow:auto" will create the scrollbars.

Save & refresh the web page :

As you see, the ScrollSpy follows the user as she/he is scrolling the web page:

And of course, the ScrollSpy Menu will be perfectly responsive on mobiles and tablets:

That's all!!  In this tutorial we've learned how to create an ScrollSpy NavBar with the Twitter Bootstrap as a Menu.

Happy programming.....

       By Carmel Schvartzman

כתב: כרמל שוורצמן