3

我有一个导航设置，当单击链接时，页面会向下滚动到列表中的相应项目，当到达项目时更改链接的类。

<nav> 
<a href="#one" class="anchorLink">one</a> 
<a href="#two" class="anchorLink">two</a> </nav>


 <ul>
  <li id="one"></li>
  <li id="two"></li> 
 </ul>

这是一个相当粗略的例子

http://jsfiddle.net/FSk5Q/1/

我还想更改项目的背景颜色（最好淡化为新颜色），然后在滚动到另一个项目时恢复它的原始类，然后更改下一个项目的类。

我需要在单击并滚动到时发生这种情况，因此 :target 选项并不是很理想。

非常感谢您的建议。在js部门不太好。

4

2 回答 2

0

希望这至少可以让你开始。我所做的是检查偏移顶部是否小于文档的滚动顶部（如果它在 X 个像素内，您也可以执行类似操作）。

褪色可以通过 CSS3 过渡来完成。

$(document).on('scroll', function () {
    $("li").each(function () {
        if ($(this).offset().top <= $(document).scrollTop()) {
            $("li").removeClass('highlight');
            $(this).addClass('highlight');
        }
        else {
            $(this).removeClass('highlight');
        }
    });
});

http://jsfiddle.net/FSk5Q/6/

于 2013-03-05T17:22:59.630 回答
0

我做了一个基于Explosion Pills的固定版本。希望这是你想要的。

$(document).on('scroll', function ()
{
    $("nav a").removeClass('highlight'); // reset all menu items
    temp = $();
    $("li").each(function (i) // for each content blcok (you schould give them a class)
    { 
        if ($(this).offset().top <= $(document).scrollTop()) // if it's position is above/at the page top
        {
            temp = $("nav a:nth-child("+(i+1)+")");
        }
    });
    temp.addClass('highlight');
});

http://jsfiddle.net/maxmeuten/FSk5Q/8/

于 2013-03-05T17:58:56.200 回答