Create Scrollspy (Menu)

Create a Scrollspy

The Scrollspy plugin is used to create is a navigation mechanism that automatically highlights the nav links based on the scroll position to indicate to the visitor where they are currently on the page. It is particularly useful when a page has a large amount of content. It is often used with the Affix plug-in.

View Demo

Scrollspy (Vertical Menu Version)

  1. Create a new file in the site root directory with the Bootstrap framework and save it (e.g., scrollspy_tab.html).

    TIP: Use an existing page that has the Bootstrap framework and delete the content between the <body> opening and closing tags.

  2. Write the following <script> tag above the closing </html> tag to position and format the background color of the various sections that will be created later.

    NOTE TO SELF: Review and update CSS from Tutorial Republic

    <style type="text/css">
    body{
    position: relative;
    }
    ul.nav-tabs {
    width: 140px;
    margin-top: 20px;
    border-radius: 4px;
    background: #fff;
    z-index: 999;
    border: 1px solid #ddd;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    }
    ul.nav-tabs li {
    margin: 0;
    border-top: 1px solid #ddd;
    }
    ul.nav-tabs li:first-child {
    border-top: none;
    }
    ul.nav-tabs li a {
    margin: 0;
    padding: 8px 16px;
    border-radius: 0;
    }
    ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover {
    color: #fff;
    background: #0088cc;
    border: 1px solid #0088cc;
    }
    ul.nav-tabs li:first-child a {
    border-radius: 4px 4px 0 0;
    }
    ul.nav-tabs li:last-child a {
    border-radius: 0 0 4px 4px;
    }
    ul.nav-tabs.affix {
    top: 0px; /* set the top position of pinned element */
    }
    @media screen and (min-width: 992px) and (max-width: 1199px){
    ul.nav-tabs{
    width: 180px; /* set nav width on medium devices */
    }
    }
    @media screen and (min-width: 1200px){
    ul.nav-tabs{
    width: 220px; /* set nav width on large devices */
    }
    }
    </style>
    </html>

  3. Below the opening <body> tag, write the following HTML code to create a navbar and sections

    TIP: See NavBar section for details on code.

    <body>
    <div class="container">
    <h1>RMCS: Learning Made Easy</h1>
    <p><i>Click on a menu item or scroll this page to see sections</i></p>
    <div class="row">
    <div class="col-sm-3" id="menuScrollspy">
    <ul class="nav nav-tabs nav-stacked" data-offset-top="120" data-spy="affix">
    <li class="active"><a href="#section1">HTML 5</a></li>
    <li><a href="#section2">CSS 3</a></li>
    <li><a href="#section3">JavaScript</a></li>
    </ul>
    </div>
    <div class="col-sm-9">
    <div id="section1">
    <h2>HTML 5</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</
    </div>
    <hr>
    <div id="section2">
    <h2>CSS 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    </div>
    <hr>
    <div id="section3">
    <h2>JavaScript</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nulla, odit blanditiis facere aliquam minus quas accusamus quia eveniet illum modi sed aspernatur laboriosam quo reprehenderit eos eius aliquid distinctio!</p>
    </div>
    <hr>
    </div>
    </div>
    </div>

  4. Write the following attributes into the opening <body> tag:

    <body data-spy="scroll" data-target="#menuScrollspy">

  5. CHECK POINT: Save the file and preview it in a browser. Use the scrollbar to scroll the page. You should see that as you reach each section of the page the navbar menu change accordingly.