Working with scrollspy in bootstrap

The Scrollspy plugin let us target sections of the page based on scroll position. It is perhaps a little similar to using an elevator, except we are navigation up and down a web page, instead of going from floor to floor in a building. By adding an ‘.active’ class to our navigation menu we can have viewers scroll up or down a page, instead of leaving the page. To add the Scrollspy plugin with data attributes, add ‘data-spy=”scroll”‘ to the element,and then ‘data-target=”.navbar”‘, to the menu to apply the class changes.

HTML file:
The example below has been done in a plunker bootstrap template.

 <!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Le styles -->
    <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <style>
      body {
        padding-top: 60px;
      }
      @media (max-width: 979px) {

        /* Remove any padding from the body */
        body {
          padding-top: 0;
        }
      }
    </style>
    <link href="style.css" rel="stylesheet" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    <!-- Le javascript
    ================================================== -->
    <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
   <nav id="navbar">
  <ul class="nav">
    <li><a href="#page1">Page 1</a></li>
    <li><a href="#page2">Page 2</a></li>
    <li><a href="#page3">Page 3</a></li>
    <li><a href="#page4">Page 4</a></li>
    <li><a href="#page5">Page 5</a></li>
  </ul>
</nav>

<div id="content" data-spy="scroll" data-target="#navbar">
  <section id="page1" class="page">
    <h1>Page 1</h1>
  </section>

  <section id="page2" class="page">
    <h1>Page 2</h1>
  </section>

  <section id="page3" class="page">
    <h1>Page 3</h1>
  </section>

  <section id="page4" class="page">
    <h1>Page 4</h1>
  </section>

  <section id="page5" class="page">
    <h1>Page 5</h1>
  </section>
</div>

  </body>

</html>

Stylesheet file:

/* Put your css in here */
body {
    padding-top: 40px;
    font: normal 13px 'Helvetica Neue', Helvetica, sans-serif;
}

#navbar {
    border-bottom: 1px solid red;
    background: #ddd;
    width: 100%;
    top: 0;
    position: fixed;
}

#navbar li {
    padding: 10px;
    float: left;
}

#navbar a {
    text-decoration: none;
    color: #000;
}

#navbar .active a {
    color: red;
}

/* Remove this if you want to try $('body').scrollspy(); */
#content {
    height: 400px;
    overflow-y: scroll;
}

.page {
    border: 1px solid #ddd;
    border-width: 1px 0;
    background: #f7f7f7;
    margin: 20px 0;
    padding: 200px;
    height: 100px;
}

bootspybar

Scrollspy Usage:
To use Scrollspy must add ‘data-spy=”scroll”‘ to the html tag, as shown above, along with the ‘data-target=”.navbar”‘. The data-target=”.navbar” is what references the element that we are spying on: ‘’… In the menu (navbar), you will need to have page anchors that will serve as points to scroll to:

Menu
page1
page2
page3
page4
page5

other useful links:
1>Bootstrap Grid System
2>Bootstrap Nav-bar

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address:

Delivered by FeedBurner

6 thoughts on “Working with scrollspy in bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *