Bootstrap 5 Scrollspy Options
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.
Bootstrap 5 Scrollspy Options: Scrollspy options can be through data attributes or via JavaScript code. We need to append the option name with ‘data-bs-‘ to pass through the data attributes as shown in the example.
- offset: This option specifies the number of pixels from the top of the page that the Scrollspy should start. For example, if you set the offset to 100, the Scrollspy will start tracking when the user scrolls 100 pixels down from the top of the page.
- method: The method option determines how the scroll position is detected. There are two possible values to provide in the method option offset, auto.
- target: This option specifies the element that the Scrollspy should listen to for scroll events. It can be a CSS selector for the element or a reference to the element itself.
Example 1: In this example, we will demonstrate scrollspy options like offset, and target passing through data attributes.
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="#java"> Java </a> <a class="list-group-item list-group-item-action" href="#python"> Python </a> <a class="list-group-item list-group-item-action" href="#c++"> C++ </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 id="java" class="container bg-warning mt-5 pt-5 h-50"> <h1 class="text-success"> GeeksforGeeks </h1> <p> Java is a high-level, class-based, object-oriented programming </p> <p> language that is designed to have as few implementation </p> <p> dependencies as possible.</p> </div> <div id="python" class="container bg-info mt-5 pt-5 h-50"> <h1 class="text-success">GeeksforGeeks</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> <div id="c++" class="container bg-danger mt-5 pt-5 h-50"> <h1 class="text-success">GeeksforGeeks</h1> <p>C++ is a cross-platform language that can be used to create </p> <p>high-performance applications. C++ was developed by Bjarne </p> <p>Stroustrup, as an extension to the C </p> </div> </div> </div> </div></body></html> |
Output:
.gif)
Bootstrap 5 Scrollspy Options
Example 2: In this example, we will demonstrate the scrollspy options via JavaScript.
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></head><body class="m-3"> <nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="#java"> JAVA</a> </li> <li class="nav-item"> <a class="nav-link" href="#python"> PYTHON</a> </li> <li class="nav-item"> <a class="nav-link" href="#c++"> C++</a> </li> </ul> </nav> <div id="java" class="container bg-warning mt-5 pt-5 h-50"> <h1 class="text-success">GeeksforGeeks</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="python" class="container bg-info mt-5 pt-5 h-50"> <h1 class="text-success">GeeksforGeeks</h1> <p>Python is a high-level, general-purpose programming language. Its </p> <p>design philosophy emphasizes code readability with the use of</p> <p>significant indentation.</p> </div> <div id="c++" class=" container bg-danger mt-5 pt-5 h-50"> <h1 class="text-success"> GeeksforGeeks </h1> <p>C++ is a cross-platform language that can be used to create high-performance</p> <p>applications. C++ was developed by Bjarne Stroustrup,</p> <p>as an extension to the C,</p> </div> <script> // initialize scrollspy with "offset" method new ScrollSpy('#scrollspy', { target: '#scrollspy', offset: 100, duration: 500 }); </script></body></html> |
Output:
.gif)
Bootstrap 5 Scrollspy Options
Reference: https://getbootstrap.com/docs/5.0/components/scrollspy/#options
Please Login to comment...