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

Question

我想在向下滚动时更改菜单项上的活动类.当您滚动到属于菜单链接的内容时,给它一个活动状态(将在css中设置样式).这与Bootstrap与scrollspy插件一起使用的效果相同.但是,我没有使用相同的设置,所以我尝试了其他几个脚本,但我仍然无法使用它.我正在使用bootstrap 3,代码如下:

看看小提琴

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{
    position: relative; 
}

添加以下JS行以指定scrollspy目标.

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

将nav类添加到菜单(scrollspy在目标中查找具有类nav的元素).

<ul class="nav navigation">

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