jQuery：向下滚动时立即隐藏元素

Question

我想在滚动条上隐藏一个元素。但是，直到窗口滚动大约四分之一/一半时它才会隐藏，这不是我想要的。它应该在滚动开始后立即隐藏。

我有一个元素会不断淡入淡出，直到您开始滚动，此时它会消失。滚动回到顶部，它会再次出现并开始淡入淡出。

这是我的代码：

<script type="text/javascript">
$(function () {

    var $element = $('#scrollDown');
    var $load = true;
    var $pos = ( $(window).scrollTop() );

    (function fadeInOut() {
        setInterval(function () {
            if ($load) {
                $element.fadeIn(750, function () {
                    $element.fadeOut(1000);
                });
            }

            $(window).scroll(function() {
                if ($(this).scrollTop() > $pos) {
                    $load = false;
                    $element.fadeOut(1000);
                }
                else {
                    $load = true;
                }
            });
        }, 500);
    }) ();
}

Answer 1

如果我理解，您希望在开始滚动时消失元素，当返回到顶部时，再次出现，所以我会尝试这样做：

$(window).scroll(function() {

    if($(this).scrollTop() > 0) {
        $element.fadeOut(1000);
    } else {
        $element.fadeIn(1000);
    }
});

这是你需要的吗？

在这里查看：http://jsfiddle.net/benjasHu/4uj50cg3/1/

Answer 2

您需要做的就是将 if 语句更改为类似..

$(window).scroll(function() {
            if ($element.css("opacity") == 1) {
                $load = false;
                $element.fadeOut(1000);
            }
            else {
                $load = true;
            }
        });

现在它会在滚动开始时触发，并且因为 if 语句而只触发一次。