Javascript 更改<；李>；当滚动到

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

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

这是一个相当粗糙的例子

我还想改变项目的背景颜色，一旦它达到（最好是褪色到一个新的颜色），然后恢复它的原始类时，另一个项目是滚动到，然后改变下一个项目的类

---

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

你真的不需要把这件事复杂化太多，只要在可能的情况下使用CSS转换：

li:target {
    background-color: #f90;
    -moz-transition: all 2s linear;
    -ms-transition: all 2s linear;
    -o-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}

正文{
保证金：0；
填充：0；
}
导航{
位置：固定；
背景：#fff；
宽度：10%；
填充：50px；
背景色：rgba（255、255、255、0.4）；
边框：2倍实心#000；
}
.亮点{
背景：#b4；
}
ulli{
列表样式：无；
边缘底部：10px；
宽度：300px；
高度：500px；
背景：#ccc；
}
李：目标{
背景色：#f90；
-moz转变：所有2s线性；
-ms转换：所有2s线性；
-o-过渡：所有2s线性；
-webkit转换：所有2s线性；
过渡：所有2s线性；
}
李：以前{
内容：“列表元素”属性（id）；
显示：块；
文本对齐：右对齐；
字号：2em；
字体大小：粗体；
}

非常感谢，这太完美了。我不知道目标选择器。请记住CSS转换与目标选择器不兼容。同样的道理也适用于