Bootstrap Scrollspy

Bootstrap Scrollspy is basically a type of navigation menu which changes its active item based on the position of the scrollbar. Conversely, you can navigate to corresponding location on the page by clicking the relevant item on the menu bar. This is really helpful if you want to create one page websites with parallax effect.

To use scrollspy plugin in your application you can either add “scrollspy.js” file to your application or you can use “bootstrap.js” file which by default contains the code for this plugin. To see how we can create a basic bootstrap scrollspy, take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        body{
            margin-top: 50px;
        } 
        
        .box{
            width: 800px;
            height: 500px;
        }
        
        .purplebox{
            background-color: blueviolet;
        }
         .redbox{
            background-color:red;
        }
         .bluebox{
            background-color:blue;
        }
         .yellowbox{
            background-color: yellow;
        }
         .graybox{
            background-color:gray;
        }
    </style>
        
    
    </head>

        <body data-spy="scroll" data-target=".navbar" data-offset="50">

        <!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
        <nav class="navbar navbar-inverse navbar-fixed-top">

          <ul class="nav navbar-nav">
            <li><a href="#section1">Purple</a></li>
            <li><a href="#section2">Red</a></li>
            <li><a href="#section3">Blue</a></li>
             <li><a href="#section4">Yellow</a></li>
              <li><a href="#section5">Orange</a></li>
         </ul>
        </nav>

      
       <h1 id="section1"> Purple Box</h1>
        <div class="box purplebox"></div>
            
           <h1 id="section2"> Red Box</h1>
        <div class="box redbox"></div>
            
               <h1 id="section3">Blue Box</h1>
        <div class="box bluebox"></div>
            
               <h1 id="section4"> Yellow Box</h1>
        <div class="box yellowbox"></div>
            
               <h1 id="section5"> Gray Box</h1>
        <div class="box graybox"></div>

        </body>       

</html>

Download the code Try the code

To understand what’s happening in the code, let’s start with the first line. To make an area scrollable, simply add “data-spy=”scroll”” attribute to any div. You can also add it to body element as done in the above example. Next thing is that you need to “data-target” attribute to the scrollable area element. The value for this attribute should be the class name or id of the navigation bar which will be used for implementing scrollspy effect. Our example has a “nav” attribute with class “navbar” therefore we set the value of “data-target” attribute to “navbar”.

Finally, create items for the navigation bar using anchor tags. The “href” attribute of each link in the menu must be equal to the id of the section to which it will scroll. For instance if your h1 element has an id “section1”, the corresponding link will have “href” value set to “#section1”.

Now open the above page in browser. Start scrolling down the page, you shall see that the active menu item in the navigation bar will keep changing. Also, if you click any menu item on the navigation menu, the page will scroll automatically to that section.

<<< Bootstrap PopoverBootstrap Affix >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .