Scrollspy Bootstrap 5 - Javascript

Scrollspy is a JavaScript plugin that highlights the active section of a webpage based on the scroll position. It is commonly used in navigation menus to indicate which section of the page the user is currently viewing.

Features

• Highlights active section in navigation menu based on scroll position
• Smooth scrolling to section when navigation link is clicked
• Can be used with any navigation menu, not just Bootstrap
• Customizable options for offset, target, and threshold

Usage

To use scrollspy in your website, you need to include the scrollspy.js file in your HTML document. You also need to add some data attributes to your navigation menu.

HTML Markup

Here is an example of how to set up the HTML markup for a scrollspy-enabled navigation menu:

<nav id="navbar">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#section1">Section 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section2">Section 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">Section 3</a>
    </li>
  </ul>
</nav>

<div id="section1">
  <h2>Section 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer faucibus risus tortor, vel malesuada ex sodales quis. Sed vel ultrices libero. Praesent nulla mi, lobortis vitae vulputate eu, venenatis sit amet enim. Vestibulum ante ipsum primis in faucibus orci.</p>
</div>

<div id="section2">
  <h2>Section 2</h2>
  <p>Nullam condimentum consectetur leo id tristique. Fusce non mauris vel dolor convallis euismod. Nam pharetra nulla eget velit dapibus sodales. Maecenas vel pharetra leo. Duis vel purus vel dui euismod finibus. Sed auctor libero lorem, at tristique sapien egestas ut.</p>
</div>

<div id="section3">
  <h2>Section 3</h2>
  <p>Phasellus congue augue leo, at venenatis mauris pretium vitae. Vestibulum interdum, ipsum non aliquet sollicitudin, tortor sem accumsan nunc, a vulputate justo quam sed lorem. Fusce mollis, mauris a feugiat accumsan, quam elit tincidunt lectus, ac venenatis odio erat ac lectus. Morbi et purus mollis, feugiat tellus nec, faucibus metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

Javascript Initialization

After you have set up your HTML markup, you need to initialize scrollspy with JavaScript. Here is an example of how to do it:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar',
  offset: 74
})

Customization

Options

• target: Selector for the navigation menu element
• offset: Offset value in pixels to adjust the position of the active navigation item
• threshold: Number between 0 and 1 to set the percentage of the viewport height to trigger the section change. For example, a value of 0.5 will trigger the section change when the section is halfway up the viewport.

Styling

You can customize the active state of the navigation menu item with the following CSS:

.nav .nav-link.active {
  background-color: #f2f2f2;
}

Conclusion

Scrollspy is a useful tool for improving the user experience on your website by providing visual feedback about the user's scroll position. With Bootstrap 5, it's easy to implement and customize to your needs.