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

【问题标题】：How to hide a Div when the scroll bar is moving with jQuery?当滚动条与jQuery一起移动时如何隐藏Div？
【发布时间】：2011-11-15 11:58:24
【问题描述】：

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

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

非常感谢！

【问题讨论】：

如果停止滚动，#menu 是否必须淡入？
@Joe，我正在滚动整个窗口（文档窗口）。
@Mohammad 我想您应该将其添加到您的问题中；）

标签： javascript jquery scroll visibility fade

【解决方案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 秒后菜单需要重新出现。