Bootstrap Scrollspy
One of the features is Bootstrap scrollspy is used to indicate currently active links in the menu, based on the scroll position.
Creating ScrollSpy with Bootstrap:
Scrollspy uses the data-spy = “scroll” attribute, which can be used as the scrollable area and add the data-target attribute with the ID or class of the parent element of any Bootstrap .navbar component to indicate navbar is connected with the scrollable area and nav links will be highlighted.
Example:
<body data-spy="scroll" data-offset="15" data-target="#myScrollspy">
<div class="container">
<h1>Bootstrap Scrollspy</h1>
<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>
<a class="list-group-item list-group-item-action" href="#section4">Section Four</a>
<a class="list-group-item list-group-item-action" href="#section5">Section Five</a>
</div>
</div>
<div class="col-sm-9">
<div id="section1">
<h2>Section One</h2>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here..............</p>
</div>
<hr>
<div id="section2">
<h2>Section Two</h2>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here..............</p>
</div>
<hr>
<div id="section3">
<h2>Section Three</h2>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here..............</p>
</div>
<hr>
<div id="section4">
<h2>Section Four</h2>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here..............</p>
</div>
<hr>
<div id="section5">
<h2>Section Five</h2>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here..............</p>
</div>
</div>
</div>
</div>
</body>
OUTPUT:
Note: Bootstrap4 scrollspy plugin requires the use of a Bootstrap nav component for proper highlighting of active links.
Creating ScrollSpy via Data Attributes:
You can add scroll spy behavior to your top bar navigation with data attributes without a single line of JavaScript code.
Example:
<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</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">
<h1>Bootstrap Scrollspy</h1>
<div id="section1">
<h2>Section 1</h2>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here.............</p>
</div>
<hr>
<div id="section2">
<h2>Section 2</h2>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here.............</p>
</div>
<hr>
<div id="section3">
<h2>Section 3</h2>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here.............</p>
</div>
<hr>
<h2>Section 4</h2>
<p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet.</p>
<div id="section4dot1">
<h3>Section 4.1</h3>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here.............</p>
</div>
<div id="section4dot2">
<h3>Section 4.2</h3>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here.............</p>
</div>
<div id="section4dot3">
<h3>Section 4.3</h3>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here.............</p>
</div>
<hr>
<div id="section5">
<h2>Section 5</h2>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here..............</p>
</div>
</div>
</body>
OUTPUT:
Explanation of Code:
The Bootstrap scrollspy has basically 2 attributes — the target nav and the scrollable area to spy on, which is often the <body> section.
- Add data-spy=” scroll” to the element that should be used as the scrollable area, which is the <body>
- The data-target attribute is added on the scrollable element with the id or the class name of the navigation bar. scroll spy is to make sure that the navbar is connected with the scrollable area.
- The optional data-offset component specifies the number of pixels to offset from the top when calculating the position of scroll. The default value is 10 pixels.
Creating ScrollSpy via JavaScript:
Add scroll spy manually using the JavaScript — just call the scrollspy() Bootstrap method with the id or class selector of the navbar in JavaScript code.
Example:
<body>
<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</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">
<h1>Bootstrap Scrollspy</h1>
<div id="section1">
<h2>Section 1</h2>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here.............</p>
</div>
<hr>
<div id="section2">
<h2>Section 2</h2>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here.............</p>
</div>
<hr>
<div id="section3">
<h2>Section 3</h2>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here.............</p>
</div>
<hr>
<h2>Section 4</h2>
<p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet.</p>
<div id="section4dot1">
<h3>Section 4.1</h3>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here.............</p>
</div>
<div id="section4dot2">
<h3>Section 4.2</h3>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here.............</p>
</div>
<div id="section4dot3">
<h3>Section 4.3</h3>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here.............</p>
</div>
<hr>
<div id="section5">
<h2>Section 5</h2>
<p>enter conter here..............enter conter here..............enter conter here..............enter conter here..............enter conter here.............</p>
</div>
</div>
</body>
Script:
<script>
$(document).ready(function(){
$("body").scrollspy({
target: "#myNavbar",
offset: 60
})
});
</script>
OUTPUT:
