Bootstrap ScrollSpy

We will discover how to construct scrollspy using Bootstrap in the following article.

Creating ScrollSpy with Bootstrap

The Bootstrap scrollspy is a navigation feature that automatically highlights navigation links based on the user's scroll position, indicating their current location on the page.

By implementing scrollspy, your web page gains elegance and improved accessibility, especially when using bookmark links to direct visitors to different sections of a content-heavy page.

To ensure proper functionality, the scrollspy has certain requirements:

It should be used on a Bootstrap nav or list group component.
The element being spied on (usually the <body> element) must have the style position: relative; applied. If spying on a <div> or any other element apart from the <body>, additionally apply a height and overflow-y: scroll; to it.
Anchors (<a>) are essential and must point to an element with a corresponding ID.

Here's an example of using scrollspy with a list group. Let's try it out to see how it works:

<body data-bs-spy="scroll" data-bs-offset="15" data-bs-target="#myScrollspy">

<div class="col-sm-3" id="myScrollspy">
    <div class="list-group">
        <a class="list-group-item list-group-item-action active" href="#part1">Part One</a>
        <a class="list-group-item list-group-item-action" href="#part2">Part Two</a>
        <a class="list-group-item list-group-item-action" href="#part3">Part Three</a>
    </div>
</div>

<div class="col-sm-9">
    <div id="part1">
        <h2>Section One</h2>
        <p>This is section one content...</p>
    </div>
    <div id="part2">
        <h2>Section Two</h2>
        <p>This is section two content...</p>
    </div>
    <div id="part3">
        <h2>Section Three</h2>
        <p>This is section three content...</p>
    </div>
</div>
</body>

Try this code

Creating ScrollSpy via Data Attributes

You can effortlessly add scrollspy behavior to your navbar using data attributes, eliminating the need to write JavaScript code. Let's explore the following example to understand how it functions:

<body data-bs-spy="scroll" data-bs-offset="60" data-bs-target="#myNavbar">

<nav id="myNavbar" class="navbar navbar-light bg-light fixed-top">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">Navbar</a>
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a href="#section1" class="nav-link">Section 1</a>
            </li>
            <li class="nav-item">
                <a href="#section2" class="nav-link">Section 2</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container">
    <div id="section1">
        <h2>Section 1</h2>
        <p>This is section 1 content...</p>
    </div>
    <div id="section2">
        <h2>Section 2</h2>
        <p>This is section 2 content...</p>
    </div>
</div>
</body>

Try this code

Now, let's break down each part of this scrollspy example code for better comprehension:

The Bootstrap scrollspy comprises two main components - the target (e.g., nav or list group) and the scrollable area to spy on, often the <body> section.

The data-bs-spy=scroll attribute is applied to the element you want to spy on, which is simply the <body> element in our case.
The data-bs-target attribute is added to the element being spied on (i.e., the <body> element) with the ID or class of the parent element of any Bootstrap .nav component. This allows the scrollspy to target nav links for highlighting purposes.
The optional data-bs-offset attribute specifies the number of pixels to offset from the top when calculating the scroll position. Adjust the offset value if the highlighted links appear too early or too late. The default value is 10 pixels.

Creating ScrollSpy via JavaScript

Additionally, you have the option to manually add scrollspy using JavaScript. Simply call the scrollspy() Bootstrap method with the id or class selector of the navbar in your JavaScript code.

<script>
$(document).ready(function () {
    $("body").scrollspy({
        target: "#myNavbar"
    })
});
</script>

Try this code

Bootstrap Scrollspy Options

To customize the scrollspy's functionality, you can pass certain options to the scrollspy() Bootstrap method. These options can be passed via data attributes or JavaScript.

For example, to set the scrollspy options via data attributes, append the option name to data-bs-, such as data-bs-offset=0, data-bs-method=position, and so on.

offset: (Default is 10) Number of pixels to offset from top when calculating position of scroll.
method: (Default is auto) Finds which section the spied element is in. The value auto will choose the best method get scroll coordinates. Whereas, the value offset will use jQuery offset method to get scroll coordinates, and the value position will use jQuery position method to get scroll coordinates.
target: Specifies element to apply Scrollspy plugin.

Bootstrap Scrollspy Methods

Here are the standard scrollspy methods provided by Bootstrap:

Passing options: Additionally, you have the flexibility to pass options to the scrollspy by using an options object. In the example below, you can specify an offset from the top when calculating the scroll position.

<script>
$(document).ready(function () {
    $("body").scrollspy({
        offset: 70
    })
});
</script>

Try this code

refresh: When utilizing scrollspy in conjunction with adding or removing elements from the DOM, make sure to call this method to ensure smooth functioning. Let's try out an example to observe its practical application.

<script>
$(document).ready(function () {
    $('[data-spy="scroll"]').each(function () {
        $(this).scrollspy("refresh");
    });
});
</script>

Try this code

Bootstrap Scrollspy Events

A few events are available in the scrollspy class of Bootstrap for hooking into scrollspy function.

activate.bs.scrollspy: This event fires whenever a new item becomes activated by the scrollspy.

In the following example, an alert message will be displayed when a new item is highlighted by the scrollspy. Let's try it out and experience how it functions in action.

<script>
$(document).ready(function () {
    $("#myNavbar").on("activate.bs.scrollspy", function () {
        var currentItem = $(".nav li.active > a").text();
        $("#info").empty().html("Currently you are viewing - " + currentItem);
    })
});
</script>

Try this code

FAQ

What is Bootstrap Scrollspy, and how does it enhance navigation in a website?

Bootstrap Scrollspy is a JavaScript plugin that dynamically updates a navigation menu based on the user's scroll position. It enhances navigation by highlighting menu items corresponding to the section of the page currently in view, providing users with a visual indication of their position on the page. This improves user experience, especially in long-scrolling web pages.

How do you implement Bootstrap Scrollspy in a navigation bar?

To implement Bootstrap Scrollspy in a navigation bar, add the data-spy attribute with the value "scroll" to the <body> tag. Additionally, set the data-target attribute to the ID of the navigation bar. This ensures that Scrollspy knows which menu to synchronize with the scroll position.

<body data-spy="scroll" data-target="#navbar">

Can I customize the ScrollSpy behavior?

Yes, Bootstrap ScrollSpy is customizable. When initializing ScrollSpy, you can pass in an options object to modify its behavior. Some available options include:

offset: Adjusts the scroll offset in pixels, allowing you to change when the active state is triggered as the user scrolls.
target: Specifies the element that ScrollSpy should target for monitoring. By default, it targets the <body> element.
method: Determines how ScrollSpy's position calculation should be done. Options include "auto" (default), "position", and "offset".

Can you demonstrate how to use Bootstrap Scrollspy with a fixed navigation bar?

Yes, to use Bootstrap Scrollspy with a fixed navigation bar, make the navigation bar fixed by adding the fixed-top class. This ensures that the navigation bar remains visible at the top of the page while scrolling. Scrollspy will then automatically highlight the corresponding navigation items.

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="navbar">

How can you customize the offset for Bootstrap Scrollspy to control when menu items are highlighted?

Customize the offset for Bootstrap Scrollspy by adding the data-offset attribute to the <body> tag. This attribute determines the number of pixels the scroll position needs to surpass before triggering the highlight. For example, data-offset="50" sets the offset to 50 pixels.

<body data-spy="scroll" data-target="#navbar" data-offset="50">

Can Bootstrap Scrollspy be used with a horizontal navigation bar, and how is it implemented?

Yes, Bootstrap Scrollspy can be used with a horizontal navigation bar. Implement it by adding the data-spy and data-target attributes to the <body> tag, similar to a vertical navigation bar. Ensure that the navigation links point to the corresponding sections using href attributes.

<body data-spy="scroll" data-target="#navbar">

How do you disable Bootstrap Scrollspy for a specific section or element?

To disable Bootstrap Scrollspy for a specific section or element, remove the data-spy attribute from that particular container. This will exclude it from Scrollspy functionality, and its associated menu item won't be highlighted as the user scrolls.

What role does the `activate.bs.scrollspy` event play in Bootstrap Scrollspy, and how can it be utilized?

The activate.bs.scrollspy event is triggered when a new section is highlighted by Scrollspy. It can be utilized to perform custom actions or apply additional styles when a new section becomes active. This event provides a hook for developers to extend Scrollspy's default behavior.

$('#navbar').on('activate.bs.scrollspy', function () {
    // Custom actions or styles on section activation
});

Can Bootstrap Scrollspy be used with dynamically added content, and how is it handled?

By default, Bootstrap Scrollspy does not automatically handle dynamically added content. If you dynamically add sections to the page, manually refresh Scrollspy by calling the refresh method on the Scrollspy instance. This ensures that Scrollspy recognizes the new content.

$('body').scrollspy('refresh');

Is it possible to use Bootstrap Scrollspy with a custom scroll container, and how is it implemented?

Yes, Bootstrap Scrollspy can be used with a custom scroll container. Set the data-target attribute to the selector of the custom scroll container. This allows Scrollspy to synchronize with the scroll position within the specified container.

<body data-spy="scroll" data-target="#customScrollContainer">

How does Bootstrap Scrollspy handle window resizing, and is manual intervention required?

Bootstrap Scrollspy automatically updates its calculations when the window is resized. No manual intervention is required. This ensures that the scroll position and section highlights remain accurate even when the dimensions of the page change.

How does Bootstrap ScrollSpy handle browser back and forward navigation?

Bootstrap ScrollSpy doesn't handle browser back and forward navigation directly. When users use the browser's back and forward buttons, the ScrollSpy state won't be preserved. This is because ScrollSpy's behavior is based on the user's scrolling interactions, not on the browser's navigation.

How does Bootstrap ScrollSpy handle dynamically changing content heights?

To handle dynamically changing content heights, make sure to refresh ScrollSpy whenever content is added or modified. You can use the ScrollSpy refresh method to update the internal tracking of section positions and recalculate when the "active" class should be applied.

Can I use Bootstrap ScrollSpy with content loaded via AJAX?

Yes, you can use Bootstrap ScrollSpy with content loaded via AJAX, but you'll need to ensure that ScrollSpy is properly initialized or refreshed after the new content is added to the page.

After the AJAX content is loaded and added to the DOM, call the refresh method on the ScrollSpy instance to recalculate the positions of sections and update the active state:

$(document).ready(function() {
  var scrollSpy = new bootstrap.ScrollSpy(document.body, {
    target: '#nav', // Your navigation menu ID
    // Other options
  });

  // After AJAX content is loaded
  // Refresh ScrollSpy to include new content
  scrollSpy.refresh();
});

By refreshing ScrollSpy after AJAX content is loaded, you ensure that the new sections are properly included in the ScrollSpy behavior.

Concusion

Bootstrap Scrollspy emerges as a powerful tool for enhancing website navigation by offering a range of dynamic features. Its capabilities extend from providing an Auto-Scroll Navigation experience to ensuring Dynamic Scrolling Navigation, offering users a seamless journey through a webpage.

The concept of Scroll-Activated Menus and Auto-Highlight Navigation adds an interactive layer to the user experience, automatically adjusting navigation elements as users scroll through the content. With On-Scroll Element Activation, Scrollspy enables dynamic updates to the navigation menu, ensuring that users are guided through the content as they scroll.

The integration of Scroll-Linked Navigation and Interactive Scrolling Menus allows for a cohesive and responsive navigation experience. Users benefit from Navigation Highlight on Scroll, which provides clear visual cues about the active section, enhancing orientation and engagement.

The Spy Scrolling feature, as indicated by Spy Scrolling, contributes to a fluid and immersive browsing experience, tracking the user's scroll position and dynamically adjusting the navigation accordingly. Dynamic Scroll Position Tracking ensures accurate monitoring of the user's progress through the content.

Scrollspy's ability to Highlight Active Sections and Auto-Update Navigation on Scroll further enriches the user experience, emphasizing the importance of active content sections and keeping the navigation menu synchronized with the scrolling progress. The concept of Scroll-Triggered Navigation and On-Scroll Element Selection ensures that the navigation menu evolves in real-time with the user's interaction, fostering a more engaging and user-centric website experience.

The inclusion of Dynamic Section Highlighting and Scroll Position Detector showcases Scrollspy's adaptability, allowing developers to customize and tailor the highlighting behavior based on the specific needs of the website. Overall, Bootstrap Scrollspy stands as an invaluable tool for creating an Interactive Page Navigation experience, ensuring users can effortlessly navigate and explore content with enhanced ease and engagement.

All Tutorials