如何使side ID导航链接在我向下滚动到其div时处于活动/悬停状态

Question

我正在做一些跳转链接，它们固定在我页面的一侧，它们链接到整个页面的主I。我想知道如何使跳转链接在用户向下滚动到该ID或使用跳转链接转到该ID时显示为活动或悬停状态。

我的网站是http://stormable.com/heroes/naziba/。我想要的效果类似于verge 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');
}

希望这篇文章能帮你入门。祝好运!