Skip to content
Related Articles

Related Articles

Improve Article

What is a scrollspy in Bootstrap ?

  • Last Updated : 30 Aug, 2021

We have visited many websites where the navigation bars are automatically updated as the user scrolls down the webpage. Scrollspy works according to the scroll position or the position at which the user is currently is seeing. Bootstrap scrollspy targets the navigation bar contents automatically on scrolling the area. In this article, we will see how to implement the scrollspy in Bootstrap. We will implement the scrollspy in 2 ways:

  • Horizontal scrollspy
  • Vertical scrollspy

We need to import the Bootstrap CDN libraries to use the scrollspy functionality. We will include the libraries from the official bootstrap website. There are a few requirements in order to scrollspy works properly:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • Bootstrap nav component or list group is necessary to include.
  • Require position : relative: on the element for which spying is applied, generally in the body tag.
  • <a> tag is required that must point to an element with that id.

Implementing horizontal scrollspy: We will create a navbar using a nav tag in our body. The navbar will contain three items. We will use the container class having the heading and some dummy text, which will provide some top padding to ensure that the navbar and container don’t overlap with each other. The navbar should be fixed at the top in order to scrollspy works properly.

Some attributes are added with the elements for the implementation of this feature to the body tag.



<body style="position:relative" data-spy="scroll" 
    data-target=".navbar" data-offset="50">

 

Attributes values:

  • data-spy: It is used to spy the current position in which the user is scrolling.
  • data-target: This attribute is used to connect the navigation bar with the scrollable area.
  • data-offset: This attribute specifies the number of pixels to offset from the top when calculating the position of scroll.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        .container {
            height: 500px;
            padding-top: 50px;
        }
  
        #java {
            background: lightblue;
        }
  
        #cpp {
            background: lightgreen;
        }
  
        #dsa {
            background: #ffcc66;
        }
    </style>
</head>
  
<body style="position: relative" data-spy="scroll"
    data-target=".navbar" data-offset="50">
      
    <nav class="navbar navbar-expand-lg 
        navbar-inverse navbar-fixed-top">
        <a href="#" class="navbar-brand">
            GeeksforGeeks
        </a>
          
        <ul class="nav nav-pills">
            <li class="nav-item"><a class="nav-link" 
                    href="#java">Java</a></li>
            <li class="nav-item"><a class="nav-link"
                    href="#cpp">C++</a></li>
            <li class="nav-item"><a class="nav-link"
                    href="#dsa">DSA</a></li>
        </ul>
    </nav>
    <div id="java" class="container container-fluid">
        <h4>Java</h4>
        <p>
            Java is a OOP programming language and
            GeeksforGeeks has great articles
            on it.
        </p>
    </div>
    <div id="cpp" class="container container-fluid">
        <h4>C++</h4>
        <p>
            C++ is a very popular programming language
            used by many developers and
            programmers around the world. It has
            wide range of applications from
            software to backend. I have learned
            C++ mostly from GeeksforGeeks
            because of the great content.
        </p>
    </div>
  
    <div id="dsa" class="container container-fluid">
        <h4>DSA</h4>
        <p>
            DSA or Data Structures and Algorithms are
            the most important aspects of
            programming and every good programmer
            should know DSA for better and
            efficient algorithms irrespective of
            programming language. You can find
            tons of lessons for DSA in GeeksforGeeks.
        </p>
    </div>
</body>
  
</html>

Output:

Implementing vertical scrollspy: For vertical Scrollspy, we need a vertical navbar. We have wrapped our contents inside a row for the vertical view of our navbar.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        body {
            position: relative;
        }
  
        .navbar-brand {
            position: fixed;
        }
  
        ul.nav-pills {
            top: 40px;
            position: fixed;
        }
  
        div.col-sm-9 div {
            height: 500px;
        }
  
        #java {
            background: lightblue;
        }
  
        #cpp {
            background: lightgreen;
        }
  
        #dsa {
            background: #ffcc66;
        }
  
        @media screen and (max-width: 810px) {
  
            #java,
            #cpp,
            #dsa {
                margin-left: 150px;
            }
        }
    </style>
</head>
  
<body data-spy="scroll" data-target=".navbar" 
    data-offset="20">
      
    <div class="container">
        <div class="row">
            <nav class="navbar col-sm-3">
                <a class="navbar-brand">GeeksforGeeks</a>
                <ul class="nav nav-pills nav-stacked">
                    <li class="nav-item">
                        <a class="nav-link" href="#java">Java</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#cpp">C++</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#dsa">DSA</a>
                    </li>
                </ul>
            </nav>
            <div class="col-sm-9">
                <div id="java">
                    <h4>Java</h4>
                    <p>
                        Java is a OOP programming language
                        and GeeksforGeeks has great
                        articles on it.
                    </p>
                </div>
                <div id="cpp">
                    <h4>C++</h4>
                    <p>
                        C++ is a very popular programming
                        language used by many developers
                        and programmers around the world.
                        It has wide range of applications 
                        from software to backend. I have 
                        learned C++ mostly from GeeksforGeeks
                        because of the great content."
                    </p>
                </div>
                <div id="dsa">
                    <h4>DSA</h4>
                    <p>
                        DSA or Data Structures and Algorithms are
                        the most important aspects of programming
                        and every good programmer should know DSA
                        for better and efficient algorithms irrespective
                        of programming language. You can find tons of
                        lessons for DSA in GeeksforGeeks.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Output: We have provided a margin of 150px if the screen width is less than 810px.




My Personal Notes arrow_drop_up
Recommended Articles
Page :