Open In App

Bootstrap | Scrollspy

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
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=
    <script src=
    </script>
    <script src=
    </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=
    <script src=
    </script>
    <script src=
    </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


Last Updated : 28 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads