Bootstrap | Scrollspy - GeeksforGeeks

08 Aug, 2021
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. Example 1 : Scrollspy Vertical Navigation bar 
html
<!DOCTYPE html><html lang="en"><head>  <title>Bootstrap Example</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>  <style>  body {    position: relative;  }  ul.nav-pills {    top: 20px;    position: fixed;  }  div.col-sm-9 div {    height: 250px;    font-size: 18px;  }  a {       color: green;  }  #section1 {color: white; background-color: green;}  #section2 {color: green; background-color: white;}  #section3 {color: white; background-color: green;}  #section4 {color: green; background-color: white;}        @media screen and (max-width: 810px) {    #section1, #section2, #section3, #section4 {      margin-left: 150px;    }  }  </style></head><body data-spy="scroll" data-target="#myScrollspy" data-offset="20"> <div class="container">  <div class="row">    <nav class="col-sm-3" id="myScrollspy">      <ul class="nav nav-pills nav-stacked">        <li class="active"><a href="#section1">Section 1</a></li>        <li><a href="#section2">Section 2</a></li>        <li><a href="#section3">Section 3</a></li>        <li><a href="#section4">Section 4</a></li>      </ul>    </nav>    <div class="col-sm-9">      <div id="section1">           <center><h1>Section 1</h1><h3>GeeksforGeeks</h3><h5>A computer science portal for geeks.</h5><h6> This portal has been created to provide well written, well thoughtand well explained solutions for selected questions related to programming,algorithms, other computer science subjects.</h6> <p>Scroll this section and see the navigation list while scrolling.</p>       </center>      </div>      <div id="section2">        <center><h1>Section 2</h1><h3>GeeksforGeeks</h3><h5>A computer science portal for geeks.</h5><h6> This portal also provide GATE previous year papers,short notes for the aspirants.</h6> <p>Scroll this section and see the navigation list while scrolling.</p>       </center>      </div>             <div id="section3">                <center>        <h1>Section 3</h1><h3>GeeksforGeeks</h3><h5>A computer science portal for geeks.</h5><h6>This portal also provide interview questions asked by private and public sectors.</h6> <p>Scroll this section and see the navigation list while scrolling.</p>       </center>      </div>      <div id="section4">                 <center><h1>Section 4</h1><h3>GeeksforGeeks</h3><h5>A computer science portal for geeks.</h5><h6>It also provide Internship aor contributor program for students.</h6> <p>Scroll this section and see the navigation list while scrolling.</p>       </center>      </div>         </div>  </div></div> </body></html>
Output :  
 
Example 2 : Scrollspy Horizontal Navigation bar 
html
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">   </script>  <style>  body {      position: relative;  }  p {      font-size: 18px;  }  #section1 {padding-top:50px;height:500px;color: white; background-color: green;}  #section2 {padding-top:50px;height:500px;color: green; background-color: white;}  #section3 {padding-top:50px;height:500px;color: white; background-color: green;}  #section4 {padding-top:50px;height:500px;color: green; background-color: white;}  </style></head><body data-spy="scroll" data-target=".navbar" data-offset="50"> <nav class="navbar navbar-inverse navbar-fixed-top">  <div class="container-fluid">    <div class="navbar-header">        <button type="button" class="navbar-toggle"data-toggle="collapse" data-target="#myNavbar">          <span class="icon-bar"></span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>                             </button>      <a class="navbar-brand" href="#">GeeksforGeeks</a>    </div>    <div>      <div class="collapse navbar-collapse" id="myNavbar">        <ul class="nav navbar-nav">          <li><a href="#section1">Section 1</a></li>          <li><a href="#section2">Section 2</a></li>          <li><a href="#section3">Section 3</a></li>          <li><a href="#section4">Section 4</a></li>        </ul>      </div>    </div>  </div></nav>    <div id="section1" class="container-fluid">  <h1>Section 1</h1><h3>GeeksforGeeks</h3><h5>A computer science portal for geeks.</h5><h6> This portal has been created to provide well written, well thought and well explained solutions for selected questions related to programming, algorithms, other computer science subjects.</h6>         <p>Scroll this section.</p> </div><div id="section2" class="container-fluid">  <h1>Section 2</h1><h3>GeeksforGeeks</h3><h5>A computer science portal for geeks.</h5><h6> This portal also provide GATE previous year papers, short notes for the aspirants.</h6> <p>Scroll this section.</p> </div><div id="section3" class="container-fluid">  <h1>Section 3</h1><h3>GeeksforGeeks</h3><h5>A computer science portal for geeks.</h5><h6>This portal also provide interview questionsasked by private and public sectors.</h6> <p>Scroll this section.</p> </div><div id="section4" class="container-fluid">   <h1>Section 4</h1><h3>GeeksforGeeks</h3><h5>A computer science portal for geeks.</h5><h6>It also provide Internship or contributor program for students.</h6> <p>Scroll this section.</p> </div> </body></html>
Output : 
 
 
 
Supported Browser:
Google Chrome
Microsoft Edge
Firefox
Opera
Safari
Some attributes are added with the elements for the implementation of this feature. These are –  
data-spy It is an attribute that is to be added with the element which is using as the scrollable area (in the above example we are taken it as the body). The value of data-spy is scroll.data-target This attribute is used to connect navigation bar with the scrollable area. It takes the value as the name of the ID or class of the navigation bar.data-offset This attribute specifies the number of pixels to offset from top when calculating the position of scroll.
data-spy It is an attribute that is to be added with the element which is using as the scrollable area (in the above example we are taken it as the body). The value of data-spy is scroll.
data-target This attribute is used to connect navigation bar with the scrollable area. It takes the value as the name of the ID or class of the navigation bar.
data-offset This attribute specifies the number of pixels to offset from top when calculating the position of scroll.
 
ysachin2314
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Form validation using jQuery
How to change navigation bar color in Bootstrap ?
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?