Sometimes while designing the website, we include some attractive features which makes website eye-catching. One of the features is Bootstrap scrollspy which target the navigation bar contents automatically on scrolling the area.
Create scrollspy: The data-spy=”scroll” and data-target=”.navbar” attribute is used to create scrollspy element. The scrollspy is used to update the navigation links when scrolling the page.
Example:
<!DOCTYPE html> <html lang="en"> <head> <title>Scrollspy</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script> <style> body { position: relative; } </style> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <nav class="navbar navbar-expand-sm bg-success navbar-dark fixed-top"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#content1">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#content2">Algo</a> </li> <li class="nav-item"> <a class="nav-link" href="#content3">DS</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Languages </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#content4">C</a> <a class="dropdown-item" href="#content5">C++</a> </div> </li> </ul> </nav> <div id="content1" class="container-fluid bg-primary" style="height:250px; padding-top:80px;"> <h1>GeeksforGeeks</h1> <p>A computer science portal for geeks</p> </div> <div id="content2" class="container-fluid bg-light" style="height:250px; padding-top:80px;"> <h1>Algorithm Analysis</h1> <p>A stepwise procedure to solve a problem</p> </div> <div id="content3" class="container-fluid bg-warning" style="height:250px; padding-top:80px;"> <h1>Data Structure</h1> <p> Data structure is a perticular way to organizing the data in computer memory so that it can be used efficiently. </p> </div> <div id="content4" class="container-fluid bg-info" style="height:250px; padding-top:80px;"> <h1>C Languages</h1> <p> C is a computer science programming language </p> </div> <div id="content5" class="container-fluid bg-dark" style="height:250px; padding-top:80px;"> <h1>C++ Languages</h1> <p> C++ is the extension of C language. </p> </div> </body> </html> |
chevron_right
filter_none
Output:
Scrollspy Vertical Menu: It creates vertical navigation menu and the content are display according to the menu.
<!DOCTYPE html> <html lang="en"> <head> <title>Scrollspy</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script> <style> body { position: relative; } ul.nav-pills { top: 20px; position: fixed; } div.col-8 div { height: 500px; } </style> </head> <body data-spy="scroll" data-target="#GFG_scrollspy" data-offset="1"> <div class="container-fluid"> <div class="row"> <nav class="col-sm-4 col-4" id="GFG_scrollspy"> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#content1"> Home </a> </li> <li class="nav-item"> <a class="nav-link" href="#content2"> Algo </a> </li> <li class="nav-item"> <a class="nav-link" href="#content3"> DS </a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Languages </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#content4">C</a> <a class="dropdown-item" href="#content5">C++</a> </div> </li> </ul> </nav> <div class="col-sm-8 col-8"> <div id="content1" class="container-fluid bg-primary" style="height:250px; padding-top:80px;"> <h1>GeeksforGeeks</h1> <p>A computer science portal for geeks</p> </div> <div id="content2" class="container-fluid bg-light" style="height:250px; padding-top:80px;"> <h1>Algorithm Analysis</h1> <p>A stepwise procedure to solve a problem</p> </div> <div id="content3" class="container-fluid bg-warning" style="height:250px; padding-top:80px;"> <h1>Data Structure</h1> <p> Data structure is a perticular way to organizing the data in computer memory so that it can be used efficiently. </p> </div> <div id="content4" class="container-fluid bg-info" style="height:250px; padding-top:80px;"> <h1>C Languages</h1> <p> C is a computer science programming language </p> </div> <div id="content5" class="container-fluid bg-dark" style="height:250px; padding-top:80px;"> <h1>C++ Languages</h1> <p> C++ is the extension of C language. </p> </div> </div> </div> </div> </body> </html> |
chevron_right
filter_none
Output:
Recommended Posts:
- Bootstrap | Scrollspy
- How to set the offset property for ScrollSpy in Bootstrap ?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- Beginning BootStrap (Part-1) | Introduction and Installation
- Beginning BootStrap (Part-2) | Grid System
- Bootstrap (Part-3) | Buttons, Glyphicons, Tables
- Bootstrap (Part-5) | DropDowns and Responsive Tabs
- Bootstrap (Part-4) | Vertical Forms, Horizontal Forms, Inline Forms
- How to get circular buttons in bootstrap 4 ?
- Bootstrap (Part-6) | Progress Bar and Jumbotron
- Bootstrap (Part-7) | Alerts , Wells, Pagination and Pager
- Bootstrap (Part-8) | Badges, Labels, Page Headers
- Bootstrap (Part-9) | Tooltips
- Difference between Bootstrap and AngularJS
- Bootstrap | Navigation Bar
- Bootstrap | Carousel
- Bootstrap | Cards
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
