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">

    <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="//" />
      body {
        padding-top: 60px;
      @media (max-width: 979px) {

        /* Remove any padding from the body */
        body {
          padding-top: 0;
    <link href="style.css" rel="stylesheet" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//"></script>
    <!-- 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=""></script>
    <script data-require="bootstrap" data-semver="3.1.1" src="//"></script>
    <script src="script.js"></script>

   <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>

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

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

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

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

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



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;


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:


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 *