Bootstrap ScrollSpy
In this tutorial you will learn how to create scrollspy with Bootstrap.
Creating ScrollSpy with Bootstrap
The Bootstrap scrollspy is a navigation mechanism that automatically highlights the nav links based on the scroll position to indicate the visitor where they are currently on the page. The scrollspy will make your web page more elegant and accessible, if you are using the bookmark links for directing the visitors to the different sections of a page that has a huge amount of content.
Here's a typical example of Bootstrap scrollspy.
Example
Try this code »<body data-spy="scroll" data-offset="15" data-target="#myScrollspy"> <div class="container"> <div class="row"> <div class="col-sm-3" id="myScrollspy"> <div class="list-group"> <a class="list-group-item list-group-item-action active" href="#section1">Section One</a> <a class="list-group-item list-group-item-action" href="#section2">Section Two</a> <a class="list-group-item list-group-item-action" href="#section3">Section Three</a> </div> </div> <div class="col-sm-9"> <div id="section1"> <h2>Section One</h2> <p>This is section one content...</p> </div> <hr> <div id="section2"> <h2>Section Two</h2> <p>This is section two content...</p> </div> <hr> <div id="section3"> <h2>Section Three</h2> <p>This is section three content...</p> </div> </div> </div> </div> </body>
Note: The Bootstrap scrollspy plugin requires the use of a Bootstrap nav component (e.g. navbar, nav tabs or pills) for proper highlighting of active links.
Creating ScrollSpy via Data Attributes
You can easily add scrollspy behavior to your topbar navigation via data attributes without writing a single line of JavaScript code. Let's check out the following example:
Example
Try this code »<body data-spy="scroll" data-offset="60" data-target="#myNavbar"> <nav id="myNavbar" class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <div class="container"> <a href="#" class="navbar-brand">Navbar</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="nav navbar-nav"> <li class="nav-item"> <a href="#section1" class="nav-link">Section 1</a> </li> <li class="nav-item"> <a href="#section2" class="nav-link">Section 2</a> </li> <li class="nav-item"> <a href="#section3" class="nav-link">Section 3</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Section 4<b class="caret"></b></a> <div class="dropdown-menu"> <a href="#section4dot1" class="dropdown-item">Section 4.1</a> <a href="#section4dot2" class="dropdown-item">Section 4.2</a> <a href="#section4dot3" class="dropdown-item">Section 4.3</a> </div> </li> <li> <a href="#section5" class="nav-link">Section 5</a> </li> </ul> </div> </div> </nav> <div class="container"> <div id="section1"> <h2>Section 1</h2> <p>This is section 1 content...</p> </div> <hr> <div id="section2"> <h2>Section 2</h2> <p>This is section 2 content...</p> </div> <hr> <div id="section3"> <h2>Section 3</h2> <p>This is section 3 content...</p> </div> <hr> <h2>Section 4</h2> <p>This is section 4 content</p> <div id="section4dot1"> <h3>Section 4.1</h3> <p>This is section 4.1 content...</p> </div> <div id="section4dot2"> <h3>Section 4.2</h3> <p>This is section 4.2 content...</p> </div> <div id="section4dot3"> <h3>Section 4.3</h3> <p>This is section 4.3 content...</p> </div> <hr> <div id="section5"> <h2>Section 5</h2> <p>This is section 5 content...</p> </div> </div> </body>
You might be thinking what this code was all about. Ok, let's go through each part of this scrollspy code one by one for a better understanding.
Explanation of Code
The Bootstrap scrollspy has basically two components — the target nav (e.g. navbar, nav tabs or pills) and the scrollable area to spy on, which is often the <body> section.
The data-spy="scroll" attribute (line no-01) is applied to the scrollable element that is being spied on, which is the <body> element.
The data-target attribute is added on the scrollable element with the ID or class of the parent element of the Bootstrap .nav component so that nav links can be targeted by the scrollspy for highlighting purpose.
The optional data-offset attribute specifies the number of pixels to offset from top when calculating the position of scroll. Adjust the offset value if the targeted links are highlighting too early or too late. The default value is 10 pixels.
Rest of the thing is self explanatory, such as the .navbar element specifies a Bootstrap navbar, the element <div id="section1"></div> (line no-33) create a bookmark with the id attribute, whereas the element <a href="#section1">Section 1</a> (line no-17) add a link to this bookmark, from within the same page, and so on.
Creating ScrollSpy via JavaScript
You may also add scrollspy manually using the JavaScript — just call the scrollspy() Bootstrap method with the id or class selector of the navbar in your JavaScript code.
Example
Try this code »<script> $(document).ready(function(){ $("body").scrollspy({ target: "#myNavbar", offset: 70 }) }); </script>
Options
There are certain options which may be passed to scrollspy() Bootstrap method to customize the functionality of a scrollspy.
Name
Type
Default Value
Description
offset
number
10
Number of pixels to offset from top when calculating position of scroll.
method
string
auto
Finds which section the spied element is in. The value auto will choose the best method get scroll coordinates. Whereas, the value offset will use jQuery offset method to get scroll coordinates, and the value position will use jQuery position method to get scroll coordinates.
target
string
Specifies element to apply Scrollspy plugin.
You can also set this options for scrollspy using the data attributes — just append the option name to data-, like data-offset="0", data-method="position", and so on.
Methods
These are the standard bootstrap's scrollspy methods:
.scrollspy('refresh')
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like this:
Example
Try this code »<script> $(document).ready(function(){ $('[data-spy="scroll"]').each(function(){ var $spy = $(this).scrollspy('refresh'); }); }); </script>
Events
Bootstrap's scrollspy class includes few events for hooking into scrollspy functionality.
Event
Description
activate.bs.scrollspy
This event fires whenever a new item becomes activated by the scrollspy.
The following example displays an alert message to the user when a new item becomes highlighted by the scrollspy.
Example
Try this code »<script> $(document).ready(function(){ $("#myNavbar").on("activate.bs.scrollspy", function(){ var currentItem = $(".nav li.active > a").text(); $("#info").empty().html("Currently you are viewing - " + currentItem); }) }); </script>
1 Comments
This comment has been removed by the author.
ReplyDelete