Scrollspy Not Working

Bootstrap Studio Help
1

I've spent the past few hours trying to get the Bootstrap 4 scrollspy working so that as the user scrolls down the page, the relevant menu items are highlighted accordingly, but nothing I try works, so I'm clearly missing something.

jsFiddle

I've applied the data-spy="scroll" attribute to the scrollable element that is being spied on, i.e. the body element and added a data-target attribute on the scrollable element with an ID of (what I believe to be) the parent element of the Bootstrap .nav component so that nav links can be targeted by the scrollspy for highlighting purposes. I've tried various iterations for positioning this, but still can't get it to work. The nav is collapsable depending on the viewport width, so it needs to work for both.

I've then added the relevant IDs to the appropriate sections, so I was assuming this would work.

Where am I going wrong?

Many thanks

2

Your nav links need to be like

< ul class="nav navbar-nav">
    < li>< a href="#stage">one< /a>< /li>
    < li>< a href="#two">two< /a>< /li>
    < li>< a href="#three">three< /a>< /li>
    < li>< a href="#four">four< /a>< /li>
    < li>< a href="#five">five< /a>< /li>
< /ul>

Add this CSS

.nav li{
    float:left;
}

And I changed your body element to

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

It appears to require the nav links in a list. You also had no id=one so I tested the first link linking to #stage.

This site may help you out further with it. It's what I used to look up your possible fix. http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

Saj

3

Hi Saj,

Many thanks for this, it works perfectly. I had assumed that because Bootstrap allows both nave menus with and without an unordered list structure, that Scrollspy would work with both iterations. None of the tutorials I'd googled made mention of the specific need for an unordered list being essential to make Scrollspy work, but looking at them now, that does appear to be the one thing they all have in common, you live and learn...

Thanks for your help with this, very much appreciated.

S

4

Ok, this helped me a LOT, so I hope it helps you.

I had worked on this for a few days and finally found a solution (for my circumstance).

No matter how many times I scrolled, or how high I placed the data-offset, the navbar was not updating until it reached the top of the document.

To fix this, place a $document.ready() around your dataspy code as follows:

$document.ready(function(){
            $('[data-spy="scroll"]').each(function () {
                var $spy = $(this).scrollspy('refresh')
                }); 
        });

This means (once the document is loaded) the scrollspy is refreshed, since it runs AFTER the document is ready.

Here are my jsfiddles if you would like to see it in action:

BEFORE

AFTER

I hope this helps you as much as it has helped me. If it doesn't, well I can at least say I tried and it works for me!

5

Ok, scratch my previous comment.

I have found this to help as well:

I placed the offset parameter DIRECTLY into the Jquery script:

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

Seems to help alleviate the issues I had with a similar error.