Cant get bootstrap 3 scrollspy to work

StackOverflow https://stackoverflow.com/questions/22435249

  •  15-06-2023
  •  | 
  •  

Frage

I have read over a bunch of the questions already on this topic and tried a bunch of different ways but for some reason I can't get scrollspy to work!

Most recent:

<body data-spy="scroll" data-target="#myScrollSpy">

and my navbar:

<!-- Main Navigation -->
<nav id="myScrollSpy">
    <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#" data-id="section1" class="scroll-link">Portfolio</a></li>
            <li><a href="#" data-id="section2" class="scroll-link">About</a></li>
            <li><a href="#" data-id="section3" class="scroll-link">Team</a></li>
            <li><a href="#" data-id="section4" class="scroll-link">Services</a></li>
            <li><a href="#" data-id="section5" class="scroll-link">Contact</a></li>
        </ul>
    </div>
</div>

Update: I realized I closed the <nav> with a </div> by accident, fixed that nothing happened. Also tried taking out <nav> and using this instead <div class="collapse navbar-collapse navHeaderCollapse" id="#myScrollSpy"> and that did not work either. I also thought not having an active state might be the issue so I added ul.nav a:active { color: #fff; } in my css but that didnt work either.

Live version HERE

War es hilfreich?

Lösung

Add an unique id for each section, like below. (You already have it)

<section id="section1">

Then use this id as href of a in navigaton.

<li><a href="#section1">Portfolio</a></li>

You do not specify styles for active link. So you cannot view the changes. But if you inspect the code, then you will see that active class has been added to li element of navigation. To view the changes apply active styles something like below -

#myScrollSpy .nav > li.active a {
    color: #fff;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top