Scrollspy—help me understand

Friends, I can’t do this without your help.

I enabled Scrollspy, but I can’t get it to work properly. I read the Bootstap, but it didn’t help.

With the rootMargin option, I was able to make a link in the menu become active at the moment I want to scroll.

I did this with the third percentage parameter:

What do the first two pixel parameters affect, I still do not understand. Whatever values I put there—it has no effect on the behavior of Scrollspy.

But the main question is about something else.

After we’ve scrolled to the beginning of the section–the menu link becomes active, it’s OK.

But when we scroll further to the same section, the menu link goes back to inactive state.

Or in other words, the links return to their original state at the same intervals. Regardless of whether a particular section is finished or not.

And I would like to make the link remain active throughout the scroll through the entire section of the page until the next section appears.

How do I do that?

As its a string then it would be just one value… you either enter a rootMargin of for example 10px (0px being the default) or a percentage for example -25%

If it was multiple it would be listed as an array and need to be in square brackets

Margin around the root. Can have values similar to the CSS margin property, e.g.
"10px 20px 30px 40px" (top, right, bottom, left).
The values can be percentages. This set of values serves to grow or shrink each side of the root element’s bounding box before computing intersections.
Defaults to all zeros.
You can read more about the IntersectionObserver.rootMargin here

Richards and Kuligaposten, I adjusted the moment of activation of the link in the menu, without even understanding how it works :slightly_smiling_face:

I did this:

and now the link changes color when I scroll to the desired section.

But how do I solve the main question? How can I make a link in the menu stay active as long as I am in that section of the page?

Right now, the link becomes active, then I scroll a few centimeters and it goes back to inactive.

And I need it to stay active while I’m scrolling through the whole section (which could be several screens).

Friends, isn’t there a solution?

How do I set up Scrollspy so that a menu item stays active until I scroll to the next item?

By default, my menu item is reset to its original state when I have not yet scrolled to the next section.

This article from web dev simplified will help you understand how the intersection observer works

I’m using scrollspy on a website, and when I put my ID on a section, the Nav Link stays seems to stay active until that section passes the midpoint of the viewport. It doesn’t matter how much content I place in the section.

What I don’t like about scrollspy is that it doesn’t seem to recognize when you scroll past a section and then scroll back up into it. You have to actually scroll all the way to the start of section for the link to become active again.

So, as soon as the section goes up out of the visible window (viewport)—Nav Link returns to its original state?

If this is the only way Scrollspy can work, it’s a silly function.

I need to use active Nav Link to show the visitor that he’s still in that section.

But as soon as the beginning of that section went up outside the viewport—that’s it, Nav Link becomes inactive again and the visitor no longer understands where he is.

Given that this is a javascript, and it eats up computing resources—this is an unreasonable price for the fact that Nav Link only blinked, and did not remain active until the next section.

It seems that this is a bug in BSS, or that we can not properly configure Scrollspy.

Because on the bootstrap site all the examples work fine—you scroll up or down, and the link changes accordingly:


It seems like Scrollspy activates the links in a very erratic manner. I’ve made a test site here..

Clicking the menu links activates the links correctly, but (on a widescreen 24" monitor) clicking Forth Section link activates the Fifth Section link in the Navbar.

Scrolling all the way to the bottom of the footer and then scrolling back up into the Sixth Section never activates the Sixth Section link. If you scroll to the bottom of the footer and then click the Sixth Section link, it will scroll to the correct place, but it will activate the Fifth Section link!

If you scroll back and forth just slightly between the First and Second Sections, or the Second and Third Sections, the links deactivate and don’t reactivate.

I’m not sure if this is how it’s supposed to behave, but I agree… it seems like the standard Scrollspy configuration is kind of useless if this is how it works.

I’m going to post this in Bug Reports and see what the Devs have to say.


If you have problem how the intersectionobserver works you can easily make your own scrollspy script without using the intersection observer here is an example


That’s beautiful, and exactly how I’d expect it should work, but writing custom scripts is not my forte, and it shouldn’t be necessary since Scrollspy used to work fine. It appears the issues only started with Bootstrap 5.2. ScrollSpy not behaving correctly · Issue #36431 · twbs/bootstrap · GitHub


In bootstrap 5.2 the changed the scrollspy to using the intersection observer API. For me that will never work good, take your example when the forth section is on the top of the page both the fifth and the sixth sections are in the view too, thats why when you click the link to the forth section in the navbar the scrollspy activate the wrong link in the navbar.
Doesn’t matter which rootMargin or threshold you set in your example it will not work as you expect it to do

@kuligaposten, it’s magic! Please post the BSS-project. I will study how you did it.