javascript - jquery fadeTo() 滚动时，向下时淡出但在返回时不淡入

Question

我一直在尝试在向下滚动时淡出飞溅，并在滚动回页面顶部时淡入。向下滚动时似乎工作正常，但当我返回时，它不会淡入。我尝试使用 fadeIn 和 FadeOut 而不是 fadeTo 但没有得到正确的行为

代码其实很简单:

var splashTop = $('.splash-container').offset().top;

$(window).scroll(function () {

    if ((splashTop - $(window).scrollTop()) < 50) {
        $('.splash-container').stop().fadeTo("slow", 0);
    } else {
        $('.splash-container').stop().fadeTo("fast", 1);
    }

});

这是 jsFiddle 示例: jsFiddle

Answer 1

如果你只需要检查 scroll 是否在顶部那么你不需要检查 Splash 的位置，尝试:

$(window).scroll(function () {
   if ($(window).scrollTop() > 0) {
        $('.splash-container').stop().fadeTo("slow", 0);
        console.log('p')
    } else {
        $('.splash-container').stop().fadeTo("fast", 1);
        console.log(box1Top)
    }
});

检查 Demo Fiddle

---

编辑

现在为什么您的代码不起作用？ ...因为您总是得到小于 50 的值:

splashTop = 8 always
-  
$(window).scrollTop() = more than 0

然后结果总是负数或 8 作为最大值，你永远不能有超过 8 的数字，你的 else 条件是无用的。