当我向下滚动到它们的 div 时，如何使侧 ID 导航链接处于活动/悬停状态

Question

我正在处理一组固定在我页面一侧的跳转链接，它们链接到整个页面的主要 ID。我想知道当用户向下滚动到该 ID 或使用跳转链接转到该 ID 时，如何使跳转链接显示为活动或悬停状态。我假设我需要为此使用 Jquery，但并不完全确定。

我的网站是http://stormable.com/heroes/naziba/。 我要的效果类似于濒临跳转链接http://www.theverge.com/2013/11/15/5106888/sony-playstation-4-review

我使用的 HTML 是

<div id="jump-list-wrap">
    <div id="jump-list">
        <ul>
            <li><a href="#stats">Stats</a></li>
            <li><a href="#abilities">Abilities</a></li>
            <li><a href="#talents">Talents</a></li>
            <li><a href="#guides">Guides</a></li>
            <li><a href="#skins">Skins</a></li>
        </ul>
    </div>
</div>

CSS是

#jump-list-wrap{
position: absolute;
right: 65px;
top: 50px;
}

#jump-list{
position: absolute;
top: 0;
background-color: #353535;
border: solid 1px #151515;
display: block;
}

#jump-list.fixed {
 position: fixed;
 top: 100px;
 }

 #jump-list li a{
display: block;
border-bottom: solid 1px #121212;
padding: 5px 20px;
color: #f2f2f2;
text-decoration: none;
 }

 #jump-list li a:hover{
 background-color: #3380c8;
 }

谢谢

Answer 1

看起来像 JQuery .scroll() 方法。 http://api.jquery.com/scroll/

Answer 2

你可以试试 Bootstrap 的 Scrollspy 插件。它完全符合您的描述：http://getbootstrap.com/javascript/#scrollspy

Answer 3

看到这个jsFiddle

jquery 检测文档上的任何页面滚动。

$(document).scroll(function() {

然后它会查看页面上的滚动位置是否在某个 div 内，并相应地更改侧边栏值。

if(scroll_top > div_one_top && scroll_top < div_two_top) {
    //You are now past div one
    $('#sidebar').text('One');
} else if( scroll_top > div_two_top) {
    //You are now past div two
    $('#sidebar').text('Two');
}

希望这能让您入门。祝你好运！