Question

我希望在我的窗口顶部设置一个导航栏position: fixed，其链接可以平滑滚动到不同的部分。

我的平滑滚动部分工作得很好。接下来，我想在向下滚动屏幕时更改导航栏的颜色。我希望切换/动画这样的东西：

向下滚动到Section2 = Animate to YELLOW Navbar 向下滚动到Section3 = Animate YELLOW＆gt; RED Navbar

我可以通过点击方法轻松实现此效果（当点击＃section2，更改CSS时），但如果用户在屏幕上向下滚动，如何在不使用导航栏中的链接的情况下如何更改？

我到目前为止：http://jsfiddle.net/saltcod/4xkbs/2/

谢谢！

特里

Answer 1

您可以处理滚动事件，然后在事件处理程序中获取部分的偏移量，以查看y坐标是否在导航列表中或更高。类似的东西：

$(window).scroll(function() {
    var bottom = $("#navcontainer").offset().top + $("#navcontainer").offset().height();
    if ($("#section3").offset().top <= bottom) {
        // Scrolled to or beyond section 3
    }
    else if ($("#section2").offset().top <= bottom) {
        // Scrolled to or beyond section 2, but not to section 3
    }
}

绑定到jsFiddle中的$（window）.scroll似乎不起作用，所以我没有测试过这段代码。

jQuery offset（）或position（） - 在接近另一个元素时更改元素的属性

1 个答案: