Bootstrap | Scrollspy

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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" 
</script>
</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 thought 
and 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>

chevron_right


Output :



Example 2 : Scrollspy Horizontal Navigation bar

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
 </script>
   </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 questions 
asked 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>

chevron_right


Output :




Some attributes are added with the elements for the implementation of this feature.
These are –

  1. 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.
  2. 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.
  3. data-offset This attribute specifies the number of pixels to offset from top when calculating the position of scroll.
  4. Note: A default value of “data-offset” is taken as 10 pixels. It is an optional attribute.



My Personal Notes arrow_drop_up


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.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.

About immukul

Executive Software Developer at Cavisson Systems