滚动时更改项目的类别

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

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

我还要更改的项目的背景颜色，一旦它达到（优选衰落到一个新的颜色），然后还原当另一个项目滚动到另一个项目时，它是原始类，然后更改下一个项目的类。

我需要这个发生，当点击并滚动到，所以：目标选项是不是很理想。

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

来源

2013-03-05 xhadf

检查了这一点：http://api.jquery.com/scroll/ – shubniggurath 2013-03-05 17:19:16

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

非常感谢，这是非常接近我所需要的。当物品到达顶层时，我会如何改变这个阶层，目前它似乎必须在顶层变化之前通过顶层。 – xhadf 2013-03-05 22:11:32

@xhadf我想用'<='来比较。您也可以在*关闭*的顶部;就像'<= $（document）.scrollTop（）+ 10' – 2013-03-05 22:16:09

啊对，谢谢！ – xhadf 2013-03-05 22:27:22

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

$(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-05 17:58:56

滚动时更改项目的类别

回答

相关问题