Create Scrollspy (NavBar)

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 (NavBar 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.

    <style>
body {position:relative;}
#section1, #section2, #section3, #section41, #section42 
{
padding-top:50px;height:500px;color: #fff;
}
#section1 {background-color: #1E88E5;}
#section2 {background-color: #673ab7;}
#section3 {background-color: #ff9800;}
#section41{background-color: #00bcd4;}
#section42{background-color: #009688;}
</style>
</html>

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

    TIP: See NavBar section for details on code. 

    <body>
<!-- Header with NavBar ----------------------------- -->
    <nav class="navbar navbar-inverse navbar-fixed-top" >
    <div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span> 
</button>
<a class="navbar-brand" href="#">RMCS</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">HTML 5</a></li>
<li><a href="#section2">CSS 3</a></li>
<li><a href="#section3">JavaScript</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Apps <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">App: Dreamweaver</a></li>
<li><a href="#section42">App: Photoshop</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>

  4. Below the closing </nav> tag, write the following HTML code to create the various sections (e.g., pages):

    </nav>
<!-- Sections 1 -------------------------------- -->
    <div id="section1" class="container-fluid">
  <h1>HTML 5</h1>
  <p><strong>INSTRUCTION:</strong>Use the scroller to 
  "see" the menu item change while scrolling.</p>
</div>
<!-- Sections 2 -------------------------------- -->
  <div id="section2" class="container-fluid">
  <h1>CSS 3</h1>
</div>
<!-- Sections 3 -------------------------------- -->
  <div id="section3" class="container-fluid">
  <h1>JavaScript</h1>
</div>
<!-- Sections 4.1 ------------------------------ -->
  <div id="section41" class="container-fluid">
  <h1>App: Dreamweaver</h1>
</div>
<!-- Sections 4.2 ------------------------------ -->
  <div id="section42" class="container-fluid">
  <h1>App: Photoshop</h1>
</div>

  5. CHECK POINT: Save the file and preview it in a browser.  You should see the navbar and sections are still STATIC. This will be fixed in the next step.

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

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

  7. 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 tab change accordingly.