Scrollspy is an effect that displays content as you scroll. And you can easily create Scrollspy in Bootstrap 5 .

 

How to create Scrollspy in Bootstrap

Scrollspy is often used to automatically update links in a navigation list based on the mouse scroll position. You can use the following sample code to create scrollspy in Bootstrap 5 .

Section 1

Try to scroll this page and look at the navigation bar while scrolling!

 . 

Detailed explanation:

In addition data-bs-spy="scroll", the element used as the scrollable area (usually the element ),

Add the `data-bs-target` attribute with a value of the navigation bar's ID or class.navbar name ( ). This ensures that the navigation bar is connected to a scrollable area.

Note that the scrollable elements must match the IDs of the links in each item in the navigation bar list ( match ).

The optional attribute data-bs-offsetspecifies the number of pixels offset from top to bottom when calculating scroll position. This is useful when you find that links within the navigation bar change their active state too early when switching to scrollable elements. The default is 10 pixels.

 

Relative positioning is required: The element needs the CSS ` position`data-bs-spy="scroll" property , with a value of "relative" to function correctly.

For example:

 Bootstrap Example 

Part 1

Introducing TipsMake.com: Originally a website providing knowledge about networks, servers, network devices, and computer tips, TipsMake.com has now become a social network for science and technology, expanding its content to meet the needs of its members in many more technology fields such as phones, smart devices, electronics, computer security, and more.

We want our members to always be up-to-date with the latest information, knowledge, and technological trends, as well as to be able to troubleshoot any technological problems they encounter when using computers, phones, and other common electronic devices.

Part 2

You can become a part of TipsMake.com by submitting articles and your technology experiences to the social media content management team via email, or by registering an account and posting directly on TipsMake.com.

You can become a part of TipsMake.com by submitting articles and your technology experiences to the social media content management team via email, or by registering an account and posting directly on TipsMake.com.

Part 3

TipsMake.com, a social network covering technology, science, and life topics, is developed and provided by META Online Network Joint Stock Company.

 

You will get the result as shown in the image below. Pay attention to your mouse scroll and look at the navigation menu bar as you scroll to clearly see the change.

Above is everything you need to know about how to create Scrollspy using Bootstrap 5. Hopefully, this Bootstrap 5 tutorial is helpful to you.