如何在滚动时更改菜单活动 link？

Question

我想在向下滚动时更改菜单项上的活动 class。当您滚动到属于菜单 link 的内容时，将其设置为活动状态（将在 css 中设置样式）。 Bootstrap 与 scrollspy plugin 的效果相同。但是，我没有使用相同的设置，所以我尝试了其他几个脚本，但仍然无法正常工作。我正在使用 bootstrap 3 和以下代码：

Check out the fiddle

HTML:

<div class="intro"><h1>Please scroll down</h1></div>

<div class="row">

    <div class="col-md-2">
        <div id="menu">
            <ul class="navigation">
                <li><a class="active" href="#one">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>
                <li><a href="#six">Six</a></li>
                <li><a href="#seven">Seven</a></li>
            </ul>
        </div>
    </div>
    <!-- end of Menu -->

    <!-- Content -->
    <div id="content" class="col-md-10">
        <h2 id="one">One</h2>
        <p class="text"></p>
        <h2 id="two">Two</h2>
        <p class="text"></p>
        <h2 id="three">Three</h2>
        <p class="text"></p>
        <h2 id="four">Four</h2>
        <p class="text"></p>
        <h2 id="five">Five</h2>
        <p class="text"></p>
        <h2 id="six">Six</h2>
        <p class="text"></p>
    </div>

</div>

<div class="footer">
    <h2 id="seven">Seven</h2>
    <p class="text"></p>
</div>

CSS:

body, html {
    height: 100%;
}
.intro {
    min-height: 100%;
    background: olive;
    color: #fff;
    text-align: center;
}
h1, h2 {
    padding: 40px 0 0;
    margin:0;
}
p.text {
    height: 700px;
    background: #ccc;
}
.active {
    background: pink;
}

Answer 1

您可以使用http://api.jquery.com/scroll

$( window ).scroll(function() {
   //yourcode
});

下面有一个演示，顺便说一句，不要忘记添加每个元素 div，例如：

<div class="box">
    <h1>H1</h1>
    <p>text</p>
</div>

http://jsfiddle.net/sxsw45fd/15/

我是一步一步添加的，但是你可以创建函数。

我不知道你为什么要这个，如果你使用 bootstrap 你可以像@ChaoticNadirs 说的那样简单地使用 scrollspy。

Answer 2

您可以执行以下操作以使其与 Bootstrap 的 scrollspy 一起使用。

添加此 CSS 以对正文使用相对定位

body{
    position: relative; 
}

添加如下一行JS来指定scrollspy目标。

$('body').scrollspy({ target: '#menu' })

将 nav class 添加到菜单（scrollspy 在目标内查找具有 class nav 的元素）。

<ul class="nav navigation">

新 fiddle：http://jsfiddle.net/tunwe6we/4/

如何在滚动时更改菜单活动 link？

How to change the menu active link while scrolling?

css

jquery

scroll

menu

twitter-bootstrap-3