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

Posted 2023-05-09

【中文标题】jQuery：向下滚动时立即隐藏元素

【英文标题】：jQuery: Hide element immediately on scroll down

【发布时间】：2014-11-28 06:16:59

【问题描述】：

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

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

这是我的代码：

<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);
    ) ();

【参考方案1】：

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

$(window).scroll(function() 

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

这是你需要的吗？

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

【讨论】：

干杯！我已经分叉了 JSFiddle 并添加了一个 CSS 位以使淡出动画可见：jsfiddle.net/RuppalSingh/tz7cx865

【参考方案2】：

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

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

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