Bootstrap 5 Scrollspy Via data Attributes
Bootstrap 5 Scrollspy Via data attributes facilitate adding the scrollspy behavior in the navigation. This will only work if we add the data-bs-spy attribute to the element that is to spy, along with including the data-bs-target attribute, specifying the id or class name of the parent element of the div container or the nav component.
Bootstrap 5 Scrollspy Via data attributes:
- data-bs-spy: This attribute’s job is to specify the element which will be spied on, i.e., the element which will be scrolled to.
- data-bs-target: This attribute’s job is to specify the id or class of the element the buttons or links on which will be clicked on to scroll.
Syntax:
<body data-bs-spy="scroll"
data-bs-target="selectorID/selectorCLASS">
...
</body>Example 1: The below code example demonstrates how we can implement the Scrollspy using Data Attributes in a Navbar.
HTML
<!DOCTYPE html><html lang="en"> <head> <link href= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script> $(function () { $('#work').on('activate.bs.scrollspy') }); </script></head> <body> <h1 class="m-4 text-success"> GeeksforGeeks </h1> <h4 class="ms-4">Bootstrap 5 Scrollspy Via data attributes </h4> <div class="container"> <nav id="navbar-example2" class="navbar navbar-light bg-light px-3 m-4"> <a class="navbar-brand" href="#"> Navbar </a> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading1"> DS </a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading2"> Algorithms </a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading3"> C++ </a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading4"> BootStrap 5 </a> </li> </ul> </nav> <div class="container" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0"> <h4 id="scrollspyHeading1"> Data Structures </h4> <p> A data structure is a group of data elements that provides the easiest way to store and perform different actions on the data of the computer. A data structure is a particular way of organizing data in a computer so that it can be used effectively. The idea is to reduce the space and time complexities of different tasks. The choice of a good data structure makes it possible to perform a variety of critical operations effectively. An efficient data structure also uses minimum memory space and execution time to process the structure. </p> <h4 id="scrollspyHeading2"> Algorithms </h4> <p> The word Algorithm means ” A set of finite rules or instructions to be followed in calculations or other problem-solving operations” Or ” A procedure for solving a mathematical problem in a finite number of steps that frequently involves recursive operations”.It can be understood by taking the example of cooking a new recipe. To cook a new recipe, one reads the instructions and steps and executes them one by one, in the given sequence. The result thus obtained is the new dish is cooked perfectly. Every time you use your phone, computer, laptop, or calculator you are using Algorithms. </p> <h4 id="scrollspyHeading3"> C++ </h4> <p> C++ is a general-purpose programming language and is widely used nowadays for competitive programming. It has imperative, object-oriented and generic programming features. C++ runs on lots of platforms like Windows, Linux, Unix, Mac etc.C++ is a general-purpose programming language that was developed as an enhancement of the C language to include object-oriented paradigm. It is an imperative and a compiled language.C++ is a middle-level language rendering it the advantage of programming low-level(drivers, kernels) and even higher-level applications (games, GUI, desktop apps etc.). The basic syntax and code structure of both C and C++ are the same. </p> <h4 id="scrollspyHeading4"> BootStrap 5 </h4> <p> Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes to make responsive websites. Bootstrap 5 was officially released on 16 June 2020 after several months of redefining its features.Bootstrap is a framework that is suitable for mobile-friendly web development. it means the code and the template available on bootstrap are applicable to various screen sizes. It is responsive for every screen size. </p> </div> </div> </body> </html> |
Output:
Example 2: This is another code example that demonstrates how we can implement the Scrollspy using Data Attributes in a Nested Side Navbar.
HTML
<!DOCTYPE html><html lang="en"> <head> <link href= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script> $(function () { $('#work').on('activate.bs.scrollspy') }); </script></head> <body data-spy="scroll" data-target="#scrollspy" data-offset="50"> <h1 class="m-4 text-success"> GeeksforGeeks </h1> <h4 class="ms-4"> Bootstrap 5 Scrollspy Via data attributes </h4> <div class="container-fluid mt-4"> <div class="row"> <nav class="col-4 nav nav-pills flex-column" id="scrollspy"> <a class="nav-link active" href="#dataStructs"> Data Structures </a> <a class="nav-link" href="#algo"> Algorithms </a> <a class="nav-link" href="#bootstrap"> Others </a> <nav class="nav nav-pills flex-column" id="scrollspy"> <a class="nav-link ms-3 my-1" href="#other"> Bootstrap </a> <a class="nav-link ms-3 my-1" href="#cpp"> C++ </a> </nav> </nav> <div class="col-8"> <div id="dataStructs"> <h2>Data Structures</h2> <p> A data structure is a group of data elements that provides the easiest way to store and perform different actions on the data of the computer. A data structure is a particular way of organizing data in a computer so that it can be used effectively. The idea is to reduce the space and time complexities of different tasks. The choice of a good data structure makes it possible to perform a variety of critical operations effectively. An efficient data structure also uses minimum memory space and execution time to process the structure. </p> </div> <div id="algo"> <h2>Algorithms</h2> <p> The word Algorithm means ” A set of finite rules or instructions to be followed in calculations or other problem-solving operations” Or ” A procedure for solving a mathematical problem in a finite number of steps that frequently involves recursive operations”.It can be understood by taking the example of cooking a new recipe. To cook a new recipe, one reads the instructions and steps and executes them one by one, in the given sequence. The result thus obtained is the new dish is cooked perfectly. Every time you use your phone, computer, laptop, or calculator you are using Algorithms. </p> </div> <div id="other"> <h1>Others</h1> </div> <div id="bootstrap"> <h2>Bootstrap</h2> <p> Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websiteslayout and web applications. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes to make responsive websites. Bootstrap 5 was officially released on 16 June 2020 after several months of redefining its features.Bootstrap is a framework that is suitable for mobile-friendly web development. it means the code and the template available on bootstrap are applicable to various screen sizes. It is responsive for every screen size. </p> </div> <div id="cpp"> <h2>C++</h2> <p> C++ is a general-purpose programming language and is widely used nowadays for competitive programming. It has imperative, object-oriented and generic programming features. C++ runs on lots of platforms like Windows, Linux, Unix, Mac etc.C++ is a general-purpose programming language that was developed as an enhancement of the C language to include object-oriented paradigm. It is an imperative and a compiled language. C++ is a middle-level language rendering it the advantage of programming low-level (drivers, kernels) and even higher-level applications (games, GUI, desktop apps etc.). The basic syntax and code structure of both C and C++ are the same. </p> </div> </div> </div> </div></body> </html> |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/scrollspy/#via-data-attributes
Please Login to comment...