当滚动条与jQuery一起移动时如何隐藏Div？

Posted 2023-02-21

【中文标题】当滚动条与jQuery一起移动时如何隐藏Div？

【英文标题】：How to hide a Div when the scroll bar is moving with jQuery?

【发布时间】：2011-11-15 11:58:24

【问题描述】：

我只希望#menu 在滚动条移动时淡出，以提供一个不那么杂乱的界面。是否有代码允许这样做？

我想基本上我正在寻找的是如何获取滚动条移动事件。在滚动 1 秒后慢慢淡出 #menu，并在滚动条不活动 2 秒后恢复 #menu。

非常感谢！

【问题讨论】：

如果停止滚动，#menu 是否必须淡入？

@Joe，我正在滚动整个窗口（文档窗口）。

@Mohammad 我想您应该将其添加到您的问题中；）

【参考方案1】：

var $menu = $("#menu");
var opacity = $menu.css("opacity");
var scrollStopped;

var fadeInCallback = function () 
    if (typeof scrollStopped != 'undefined') 
        clearInterval(scrollStopped);
    

    scrollStopped = setTimeout(function () 
        $menu.animate( opacity: 1 , "slow");
    , 2000);
;

$(window).scroll(function () 
    if (!$menu.is(":animated") && opacity == 1) 
        $menu.animate( opacity: 0 , "slow", fadeInCallback);
     else 
        fadeInCallback.call(this);
    
);

http://jsfiddle.net/zsnfb/9/

这会将滚动事件设置为做一些事情。首先，它清除一个超时以淡入菜单 div。之后，如果菜单尚未淡出，它会淡出菜单并在回调中设置超时。如果菜单已经淡出，它只是设置超时。如果用户停止滚动，菜单会在 2 秒后淡出。

还有其他使用fadeOut() 和fadeIn() 的解决方案。在这种情况下，我对这些功能的唯一问题是，将 display: none; 设置为菜单 div 会影响页面的布局，而设置 visibility: hidden; 或 opacity: 0; 不应该影响布局。

【讨论】：

很好的例子！但你知道为什么它在这里不起作用吗？ jsfiddle.net/zsnfb

我的错！您无法清除尚不存在的区间！我的答案已更新。

我将此标记为更好的答案，因为它考虑了同时触发的后续滚动事件并防止函数调用过载。 p.s.你在 fadeInCallback 定义之后缺少一个分号:)

很抱歉添加了“谢谢”评论，但这是一个很好的答案，确实帮助了我 - 我一直在通过堆栈寻找正确的解决方案。

【参考方案2】：

正确使用以下内容：

$('body').scroll(function()
    $('#menu').fadeOut();

    var scrollA = $('body').scrollTop();

    setTimeout(function()
        if(scrollA == $('body').scrollTop())
            $('#menu').fadeIn();
        
    , 200);
)

所以我们记录滚动量，等待 200 毫秒，然后查看滚动是否发生了变化，如果没有，我们将菜单淡入。

【讨论】：

请问您为什么在滚动事件中具有淡入功能？还会火吗？谢谢！

显然，除非先淡出，否则淡入不会发生。检查需要在 Fade out 函数中进行。

jQuery 允许您嵌套函数，是的，它确实会触发。请查看：jsfiddle.net/LJVMH 以获取此实现的示例。

谢谢，我想这是我对函数如何工作的误解。我想..你怎么能在滚动事件本身中检查 scrollTop 是否相同？！这就是让我感到困惑的地方。谢谢两位的澄清！还有一个很好的例子！

@Tom Walters：你知道如何避免滚动条移动不规律时淡入淡出功能溢出，导致框在滚动条后多次淡入淡出已经停止了吗？超时会导致函数完成暂停，从而导致一组备份的未完成火灾，即使在事件很久以前完成后，也会逐渐一个接一个地触发。我真的很感激。您可以在演示中通过快速移动滚动条对其进行测试。

【参考方案3】：

我想这就是你要找的http://jsfiddle.net/wfPB6/

【讨论】：

滚动不活动 2 秒后菜单需要重新出现。