The Scrollspy can be used when you need to navigate to different sections of the same page. Thus, as you scroll, the links in the navigation bar are automatically updated. Bootstrap Basics Scrollspy The following code will help you understand the creation of Scrollspy.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!-- Scrollable area --> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <!-- The navbar - The <a> elements are used to jump to a section in the scrollable area --> <nav class="navbar navbar-inverse navbar-fixed-top"> ... <ul class="nav navbar-nav"> <li><a href="#section1">Section 1</a></li> ... </ul> </nav> <!-- Section 1 --> <div id="section1"> <h1>Section 1</h1> <p>Observe that as you scroll this page the navigation bar will show some changes!</p> </div> ... </body> |
Let’s try to understand the above code: First thing we … Read more