Bootstrap 5 Scrollspy
Bootstrap 5 Scrollspy is an automatic navigation mechanism that automatically updates the scroll position. When we click on the link it automatically scrolls down to the currently active element.
To use scrollspy in Bootstrap 5, we need to add the data-bs-spy=”scroll” attribute to the element that should be used for scrolling and specify the target by using the data attribute data-bs-target=””.
How it works:
- First, you need to add a data-bs-spy=”scroll” attribute to the element that should be used for the scrollable area.
- Next, you need to add a data-bs-target attribute to the navigation menu, which should contain the ID of the element that should be used as the scrollable area.
- Finally, you need to add a href attribute to each menu item that corresponds to the ID of a section on the page.
Syntax:
<tag data-bs-spy="scroll" data-bs-target="#.."> content... </tag>
Bootstrap 5 Scrollspy:
Usage:
- Via data attributes: We can initialize the bootstrap scrollspy by using data attributes like data-bs-spy=”scroll” and data-bs-target.
- Via JavaScript: We can also initialize via JavaScript by passing the JavaScript code inside the script tag.
- Methods: Methods are used to add more functionalities to our scrollspy element. There are some methods like refresh, dispose of, getInstance, getOrCreateInstance.
- Options: Scrollspy options can be passed through data attributes or JavaScript. To pass the option via data attributes, we need to append the option name with data-bs-. There are some options like method, offset, and target.
- Events: activate.bs.scrollspy is automatically fired whenever a new scrollspy element is triggered.
Example 1: In this example, we will demonstrate bootstrap 5 Scrollspy using List.
HTML
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link href= rel="stylesheet"> <script src= </script> <style> body { position: relative; } .list-group { position: sticky; top: 10px; } </style></head><body class="m-3"> <div class="row"> <div class="col-sm-3"> <div class="list-group"> <h4 class="text-success">GeeksforGeeks</h4> <a class="list-group-item list-group-item-action " href="#item-1">Java</a> <a class="list-group-item list-group-item-action" href="#item-2">C++</a> <a class="list-group-item list-group-item-action" href="#item-3">Python</a> </div> </div> <div class="col-sm-9"> <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="50" tabindex="0"> <div class="container bg-warning mt-5 pt-5 h-50"> <h4 class="text-success">GeeksforGeeks</h4> <h2 id="item-1">JAVA</h2> <br> <p>Java is a high-level, class-based, object-oriented </p> <p>programming language that is designed to have as </p> <p>few implementation dependencies as possible.</p> </div> <div class="container bg-warning mt-5 pt-5 h-50"> <h4 class="text-success">GeeksforGeeks</h4> <h2 id="item-2">C++</h2> <p>C++ is a high-level general-purpose programming language</p> <p>created by Danish computer scientist Bjarne Stroustrup </p> <p>as an extension of the C programming language.</p> </div> <div class="container bg-warning mt-5 pt-5 h-50"> <h4 class="text-success">GeeksforGeeks</h4> <h2 id="item-3">PYTHON</h2> <p> Python is a high-level, general-purpose programming language.</p> <p>Its design philosophy emphasizes code readability with the use </p> <p>of significant indentation.</p> </div> </div> </div> </div> </body></html> |
Output :
.gif)
Bootstrap 5 Scrollspy
Example 2: In this example, we will demonstrate bootstrap 5 scrollspy using the Navbar component.
HTML
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link href= rel="stylesheet"> <script src= </script> <style> body { position: relative; } </style></head><body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50"> <nav class="navbar navbar-expand-sm bg-success fixed-top"> <div class="container-fluid"> <ul class="navbar-nav"> <li class="nav-item h3"> <a class="nav-link" href="#java"> Section 1 </a> </li> <li class="nav-item h3"> <a class="nav-link" href="#c++"> Section 2 </a> </li> <li class="nav-item h3"> <a class="nav-link" href="#python"> Section 3 </a> </li> </ul> </div> </nav> <div id="java" class="container bg-info mt-5 pt-5 h-50"> <h1 class="text-success">GeeksforGeeks</h1> <h1>Java</h1> <p>Java is a high-level, class-based, object-oriented programming language</p> <p> that is designed to have as few implementation dependencies as </p> <p>possible.</p> </div> <div id="c++" class="container bg-info mt-5 pt-5 h-50"> <h1 class="text-success">GeeksforGeeks</h1> <h1>C++</h1> <p>C++ is a high-level general-purpose programming language created by</p> <p> Danish computer scientist Bjarne Stroustrup as an extension of the C </p> <p> programming language.</p> </div> <div id="python" class="container bg-info mt-5 pt-5 h-50"> <h1 class="text-success">GeeksforGeeks</h1> <h1>Python</h1> <p> Python is a high-level, general-purpose programming language.</p> <p>Its design philosophy emphasizes code readability with the use </p> <p>of significant indentation.</p> </div> </body></html> |
Output:
.gif)
Bootstrap 5 Scrollspy
Reference: https://getbootstrap.com/docs/5.0/components/scrollspy/
Please Login to comment...