Question

我想在向下滚动时更改菜单项上的活动类。当您滚动到属于菜单链接的内容时，给它一个活动状态（将在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

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

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

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/

我逐步添加但您可以创建功能。

我不知道为什么你想要这个如果你使用bootstrap你可以简单地使用scrollspy作为@ChaoticNadirs说。

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

2 个答案: