Bootstrap 3

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)

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.

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>

CAUTION: The element with data-spy="scroll" requires the CSS position property to be set to relative in order to work correctly.

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>

Write the following attributes into the opening <body> tag:
```
<body data-spy="scroll" data-target="#menuScrollspy">
```
CODE EXPLANATION:
- The data-spy="scroll" attribute is added to the tag that should be used as the scrollable area (typically, the <body> tag).

- The data-target=".navbar" attribute is used to "target" the scrollable area.
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.

Create Scrollspy (Menu)

Create a Scrollspy

Scrollspy (Vertical Menu Version)