• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Scrollspy

← Previous Next →

Scrollspy in Bootstrap 4 is a JavaScript plugin that automatically updates navigation links based on scroll position. It is particularly useful for single-page websites, documentation pages, or long content sections where you want to highlight which section the user is currently viewing. Scrollspy enhances navigation by providing visual feedback and improving usability.

Enabling Scrollspy

To use Scrollspy, you need to include the Bootstrap 4 JavaScript library and then initialize the plugin on a scrollable container. Typically, the body element or a specific scrollable div is used.

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

  • data-spy="scroll" activates Scrollspy.

  • data-target points to the navigation element whose links will be updated.

  • data-offset adjusts the scroll position to account for fixed headers or spacing.

Scrollspy can also be initialized using JavaScript:

$('body').scrollspy({ target: '#navbar-example', offset: 50 });

Navigation Setup

Scrollspy works with nav links that correspond to content sections. Each target section must have a unique id that matches the href in the navigation links.

<nav id="navbar-example" class="navbar navbar-light bg-light flex-column">
  <a class="nav-link" href="#section1">Section 1</a>
  <a class="nav-link" href="#section2">Section 2</a>
  <a class="nav-link" href="#section3">Section 3</a>
</nav>

<div data-spy="scroll" data-target="#navbar-example" data-offset="50" class="scrollspy-example">
  <h4 id="section1">Section 1</h4>
  <p>Content for section 1...</p>
  <h4 id="section2">Section 2</h4>
  <p>Content for section 2...</p>
  <h4 id="section3">Section 3</h4>
  <p>Content for section 3...</p>
</div>

  • Each link in the navigation corresponds to a section with the same id.

  • Scrollspy highlights the active link as the user scrolls through the sections.

Scrollspy with Fixed Navbar

When using a fixed navbar, it’s important to set the data-offset value to match the height of the navbar. This ensures the highlighted section is accurate and visible.

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

  • Offset prevents sections from being hidden behind the fixed header.

  • Proper configuration improves user experience and avoids visual glitches.

Scrollspy on a Scrollable Div

Scrollspy can also be applied to a scrollable container instead of the whole body. The container must have position: relative and overflow: auto.

<div class="scrollspy-container" data-spy="scroll" data-target="#navbar-example" data-offset="10" style="height: 300px; overflow: auto;">
  <h4 id="section1">Section 1</h4>
  <p>Scrollable content...</p>
</div>

  • This is useful for embedded content, panels, or cards where only a portion of the page scrolls.

  • The same target navigation will update based on the scroll position inside the container.

Active Class and Styling

Scrollspy automatically applies the active class to the corresponding navigation link. You can style the active link using CSS:

.nav-link.active {
  font-weight: bold;
  color: #007bff;
}

  • Styling helps users quickly identify which section they are viewing.

  • You can customize colors, font weight, background, or underline to match your design.

Advanced Options

Bootstrap 4 Scrollspy provides several options for customization:

  • target – specifies the navigation element to update.

  • offset – defines the scroll offset for accuracy.

  • method – determines how to calculate which section is active ('auto' or 'position').

  • refresh – recalculates positions if content changes dynamically.

$('body').scrollspy({
  target: '#navbar-example',
  offset: 70,
  method: 'auto'
});

  • Proper configuration is essential for pages with dynamic content or images that load asynchronously.

Accessibility Considerations

  • Ensure navigation links are keyboard-accessible.

  • Provide clear and descriptive link text.

  • Avoid using Scrollspy as the sole method to indicate section context; maintain visible headings.

  • Test for screen reader compatibility.

Real-World Use Cases

  • Documentation sites where users need to know which section they are reading.

  • Single-page websites with multiple sections and fixed navigation.

  • Dashboards or admin panels with scrollable panels and contextual navigation.

  • Portfolio or blog pages where each section corresponds to a menu item.

Best Practices

  • Use consistent section headings and IDs that match navigation links.

  • Set an appropriate offset if using a fixed header.

  • Ensure that Scrollspy is responsive and works on small screens.

  • Avoid too many sections in small viewports to prevent cluttered navigation.

  • Recalculate positions dynamically if content changes after page load.

Summary of the Tutorial

This tutorial covered Bootstrap 4 Scrollspy and its usage. You learned:

  • How to enable Scrollspy using data-spy="scroll" or JavaScript.

  • Linking navigation items to sections using matching id attributes.

  • Handling fixed navbars with the data-offset attribute.

  • Using Scrollspy on scrollable containers for panels or cards.

  • Styling active links using the active class for clarity.

  • Advanced options for method, offset, and refresh for dynamic content.

  • Accessibility considerations and real-world use cases for single-page sites, documentation, or dashboards.

  • Best practices for smooth navigation and responsive behavior.

Bootstrap 4 Scrollspy is a powerful feature that improves navigation and provides visual feedback on scroll position. When implemented correctly, it helps users stay oriented on long pages, enhancing usability and engagement.

Practice Questions

  1. Create a vertical navigation menu that highlights links as you scroll through three sections on the page.

  2. Build a Scrollspy on a fixed top navbar with an offset of 70 pixels to account for the header height.

  3. Create a scrollable div containing several sections and apply Scrollspy so the sidebar updates accordingly.

  4. Build a single-page layout with five sections and ensure the active link changes as the user scrolls.

  5. Add smooth scrolling to the navigation links in a Scrollspy-enabled page.

  6. Create a Scrollspy navigation where each link has a unique color when active.

  7. Build a Scrollspy layout with dynamically loaded content and refresh positions programmatically.

  8. Create a horizontal navigation bar and apply Scrollspy so the active tab is highlighted.

  9. Build a documentation-style page with Scrollspy highlighting subheadings within sections.

  10. Create a Scrollspy example where active links are updated on both desktop and mobile screens.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top