Open In App

Bootstrap 5 Scrollspy

Last Updated : 25 Apr, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Scrollspy is used to automatically update the navigation links based on the scroll position, highlighting the corresponding section in the viewport.

To use scrollspy in Bootstrap 5, we need to add the data-bs-spy=”scroll” attribute to the element that should be used for scrolling and specify the target by using the data attribute data-bs-target=””.

How it works:

  • First, you need to add a data-bs-spy=”scroll” attribute to the element that should be used for the scrollable area.
  • Next, you need to add a data-bs-target attribute to the navigation menu, which should contain the ID of the element that should be used as the scrollable area. 
  • Finally, you need to add a href attribute to each menu item that corresponds to the ID of a section on the page.

Syntax:

<tag data-bs-spy="scroll" data-bs-target="#..">
content...
</tag>

Bootstrap 5 Scrollspy Usage:

AspectDescription
Via data attributesInitialize Bootstrap scrollspy using data attributes like data-bs-spy=”scroll” and data-bs-target.
Via JavaScriptInitialize scrollspy via JavaScript by passing code inside a script tag.
MethodsAdditional functionalities for scrollspy: refresh, dispose, getInstance, getOrCreateInstance.
OptionsPass scrollspy options through data attributes or JavaScript. Options include method, offset, and target.
Eventsactivate.bs.scrollspy event is automatically triggered when a new scrollspy element is activated.

Examples of Bootstrap Scrollspy

Example 1: In this example, Bootstrap 5 Scrollspy implementation with a sticky list-group for navigation. Utilizes `data-bs-spy=”scroll”` and `data-bs-target=”#list-example”` attributes for scroll tracking.

HTML
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
    </script>
    <style>
        body {
            position: relative;
        }

        .list-group {
            position: sticky;
            top: 10px;
        }
    </style>
</head>

<body class="m-3">
    <div class="row">
        <div class="col-sm-3">
            <div class="list-group">
                <h4 class="text-success">
                    GeeksforGeeks
                </h4>
                <a class="list-group-item list-group-item-action " href="#item-1">
                    Java
                </a>
                <a class="list-group-item list-group-item-action" href="#item-2">
                    C++
                </a>
                <a class="list-group-item list-group-item-action" href="#item-3">
                    Python
                </a>
            </div>
        </div>
        <div class="col-sm-9">
            <div data-bs-spy="scroll" 
                 data-bs-target="#list-example" 
                 data-bs-offset="50" tabindex="0">
                <div class="container bg-warning mt-5 pt-5 h-50">
                    <h4 class="text-success">
                        GeeksforGeeks
                    </h4>
                    <h2 id="item-1">
                        JAVA
                    </h2>
                    <br>
                    <p>Java is a high-level, 
                        class-based, 
                        object-oriented 
                    </p>
                    <p>programming language that 
                        is designed to have as </p>
                    <p>few implementation dependencies as possible.

                    </p>
                </div>
                <div class="container bg-warning mt-5 pt-5 h-50">
                    <h4 class="text-success">
                        GeeksforGeeks
                    </h4>
                    <h2 id="item-2">C++</h2>
                    <p>C++ is a high-level general-purpose 
                        programming language
                    </p>
                    <p>created by Danish computer 
                        scientist Bjarne Stroustrup 
                    </p>
                    <p>as an extension of 
                        the C programming language.
                    </p>
                </div>
                <div class="container bg-warning mt-5 pt-5 h-50">
                    <h4 class="text-success">
                        GeeksforGeeks
                    </h4>
                    <h2 id="item-3">
                        PYTHON
                    </h2>
                    <p> Python is a high-level, general-purpose 
                        programming language.
                    </p>
                    <p>Its design philosophy emphasizes
                         code readability with the use 
                    </p>
                    <p>of significant indentation.</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output :

Bootstrap 5 Scrollspy

Bootstrap 5 Scrollspy

Example 2: In this example, Bootstrap 5 Scrollspy with a fixed-top navbar. Sections linked in the navbar navigate to corresponding content sections with smooth scrolling.

HTML
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1" />

    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" />
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">

    </script>
    <style>
        body {
            position: relative;
        }
    </style>
</head>

<body data-bs-spy="scroll" 
      data-bs-target=".navbar" 
      data-bs-offset="50">
    <nav class="navbar navbar-expand-sm bg-success fixed-top">
        <div class="container-fluid">
            <ul class="navbar-nav">
                <li class="nav-item h3">
                    <a class="nav-link" href="#java">
                        Section 1
                    </a>
                </li>
                <li class="nav-item h3">
                    <a class="nav-link" href="#c++">
                        Section 2
                    </a>
                </li>
                <li class="nav-item h3">
                    <a class="nav-link" href="#python">
                        Section 3
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <div id="java" class="container bg-info mt-5 pt-5 h-50">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h1>Java</h1>
        <p>
            Java is a high-level, class-based,
            object-oriented programming
            language
        </p>
        <p>
            that is designed to have as few
            implementation dependencies as
        </p>
        <p>possible.</p>
    </div>
    <div id="c++" class="container bg-info mt-5 pt-5 h-50">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h1>C++</h1>
        <p>
            C++ is a high-level
            general-purpose programming
            language created by
        </p>
        <p>
            Danish computer scientist Bjarne
            Stroustrup as an extension of the
            C
        </p>
        <p>programming language.</p>
    </div>
    <div id="python" class="container bg-info mt-5 pt-5 h-50">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h1>Python</h1>
        <p>
            Python is a high-level,
            general-purpose programming
            language.
        </p>
        <p>
            Its design philosophy emphasizes
            code readability with the use
        </p>
        <p>of significant indentation.</p>
    </div>
</body>

</html>

Output:

Bootstrap 5 Scrollspy

Bootstrap 5 Scrollspy



Previous Article
Next Article

Similar Reads

Bootstrap 5 Scrollspy Options
Bootstrap 5 Scrollspy is an automatic navigation mechanism that automatically updates the scroll position. When we click on the link it automatically scrolls down to the currently active element. Bootstrap 5 Scrollspy Options: Scrollspy options can be through data attributes or via JavaScript code. We need to append the option name with 'data-bs-'
3 min read
Bootstrap | Scrollspy
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 C/C++ Code &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;h
4 min read
How to use Scrollspy in Bootstrap 5 via JavaScript ?
In this article, we will see how to use Scrollspy in Bootstrap 5 via Javascript. Using Scrollspy in Bootstrap 5, the navigation or list group components of Bootstrap update automatically based on where the user is scrolling to indicate which link is currently active in the viewport. There are 2 ways to use Scrollspy in Bootstrap 5: Via data attribu
6 min read
Bootstrap 4 | 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.Create scrollspy: The data-spy="scroll" and data-target=".navbar" attribute is used to create scrollspy element. The scro
3 min read
How to set the offset property for ScrollSpy in Bootstrap ?
Offset is a Bootstrap Scrollspy property wherein the user can specify the pixels to offset from top when calculating the position of scroll. It becomes useful when the user feels that either the navbar or the list changes the state early or when not needed while surfing. It is always a number and the default value is 10. The value can be changed th
8 min read
What is a scrollspy in Bootstrap ?
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 seeing. Bootstrap scrollspy targets the navigation bar contents automatically on scrolling the area. In this article, we will see how
4 min read
Bootstrap 5 Scrollspy with nested nav
Bootstrap 5 Scrollspy is one of the features which targets the navigation bar contents automatically on scrolling the area. The navigation highlights the navbar links as the user scrolls the page. Only nav or list groups may be utilized with Scrollspy. Scrollspy can work with a simple navbar and also a nested navbar. A nested navbar is one in which
5 min read
Bootstrap 5 Scrollspy in Navbar
Bootstrap 5 Scrollspy in Navbar is used to apply the Scrollspy on the Navbar. If you want to shift your active navbar item throughout the scrolling then this will be helpful. Things to remember to create Scrollspy in Navbar: It is used on the navbar component.The position of the scrollspy must be relative. Anchor tags are required and must point to
4 min read
Bootstrap 5 Scrollspy Via data Attributes
Bootstrap 5 Scrollspy Via data attributes facilitate adding the scrollspy behavior in the navigation. This will only work if we add the data-bs-spy attribute to the element that is to spy, along with including the data-bs-target attribute, specifying the id or class name of the parent element of the div container or the nav component. Bootstrap 5 S
6 min read
Bootstrap 5 Scrollspy dispose() Method
Bootstrap 5 Scrollspy dispose() method is used to remove the ScrollSpy functionality from an element. To use the dispose() method, you will need to select the element that the scrollspy is applied to and call the method on it. For example, if you have applied the scrollspy to a navbar with an ID of "navbar", you can call the dispose() method as fol
4 min read