Cant get bootstrap 3 scrollspy to work

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

  •  15-06-2023
  •  | 
  •  

题

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

有帮助吗？

解决方案

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;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top