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

Question

我想在向下滚动时更改菜单项上的活动类。当您滚动到属于菜单链接的内容时，给它一个活动状态（将在 css 中设置样式）。这与 Bootstrap 与 scrollspy plugin 使用的效果相同。但是，我没有使用相同的设置，所以我尝试了其他几个脚本，但我仍然无法让它工作。我正在使用带有以下代码的引导程序 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

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

添加此 CSS 以使用 body 的相对定位

body{
    position: relative; 
}

添加下面这行JS来指定scrollspy目标。

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

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

<ul class="nav navigation">

新小提琴：http://jsfiddle.net/tunwe6we/4/

Answer 2

您可以使用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/

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

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