当一个元素靠近另一个元素时，jQuery -Change()或position()保存元素的属性

Question

我想有一个导航栏设置position: fixed到我的窗口顶部，与平滑滚动到不同部分的链接。

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

向下滚动到Section2 =动画到黄色导航栏时，向下滚动到Section3 =动画黄色>红色导航栏

我可以很容易地通过click方法实现这个效果(当点击#section2时，改变CSS)，但是如果用户向下滚动屏幕-而不使用导航栏中的链接，我如何让它改变呢？

到目前为止，我得到的结果是：http://jsfiddle.net/saltcod/4xkbs/2/

谢谢!

泰瑞

Answer 1

您可以处理scroll事件，然后在事件处理程序中获取各个部分的偏移量，以查看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似乎不起作用，所以我没有测试这段代码。