需要帮助获取FadeTo方法来处理窗口滚动事件

Question

我想让我的单页网站的每个'部分'根据滚动位置淡入淡出。我希望该部分保持为display：block所以我使用 FadeTo 方法而不是FadeIn / FadeOut。

这个想法是让每个部分在距离顶部一定距离时淡入淡出，在不满足某些要求时淡出。我目前的加价尝试如下，但在弄清楚我在哪里犯错误

功能：

function scrollFadeDiv(element, navheight) {
    var offset = element.offset();
    var offsetTop = offset.top;
    var totalScroll = offsetTop - navheight;


    if (totalScroll > 0 ){
        $(element).fadeTo('slow', 0.0); 
    } else {
        $(element).fadeTo('slow', 1.0);
    }


}

和我的窗口滚动事件：

$(window).on('scroll', function(){
    var elWrapped = $('section');
    scrollFadeDiv(elWrapped, 75);
});

我担心的是，由于 live（）已被弃用且委托（）不适用于滚动事件，因此totalScroll变量不会持续在加载DOM后更新/重新计算。

提前致谢！

Answer 1

我的建议是使用航点插件：

https://github.com/imakewebthings/jquery-waypoints