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
rootMargin
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
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 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
