Skip to content
Related Articles

Related Articles

Bootstrap | Scrollspy
  • Difficulty Level : Medium
  • Last Updated : 23 Apr, 2019

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




<!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>

Output :

Example 2 : Scrollspy Horizontal Navigation bar






<!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>

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.

    Note: A default value of “data-offset” is taken as 10 pixels. It is an optional attribute.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :