当我向下滚动到div时，如何使side ID导航链接处于活动/悬停状态 [英] How to make side ID navigation links active/hover state as I scroll down to their div

问题描述

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

I'm working on a little a set of jump links which are fixed to the side of my page they link to the main IDs through out the page. I wanted to know how I could make the jump links appear in their active or hover state as the user scrolls down into that ID or use the jump link to go to that ID. I'm assuming I need to use Jquery for this but not entirely sure.

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

我正在使用的HTML是

The HTML I'm using is

<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;
 }

谢谢

推荐答案

请参阅此 jsFiddle

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

The jquery detects any page scrolling on the document.

$(document).scroll(function() {

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

It then looks to see if the scroll position on the page is within a certain div, and changes a sidebar value accordingly.

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');
}

希望这会让你开始。祝你好运！

Hopefully this will get you started. Good luck!

这篇关于当我向下滚动到div时，如何使side ID导航链接处于活动/悬停状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！