Open In App

Bootstrap | Scrollspy

Last Updated : 28 Apr, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

Sometimes while designing the website, we include some attractive features which make the website eye-catching. One of the features is Bootstrap Scrollspy which targets 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 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

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 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 used as the scrollable area (in the above example we are taking it as the body). 
    The value of data-spy is scroll.
  2. data-target This attribute is used to connect the 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 the top when calculating the position of the scroll.

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari

Next Article
Bootstrap 5 Scrollspy Options
author
vaishalichauhan3003
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox