Question

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

<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/

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

当点击AND滚动到时，我需要这样做，所以：target选项并不是很理想。

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

Answer 1

希望这至少可以让你开始。我所做的是检查偏移顶部是否小于文档的滚动顶部（如果它在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/

Answer 2

我根据 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/

滚动到时更改项目的类别

2 个答案: