如何用jQuery在滚动条移动时隐藏Div？

Question

我只是希望当滚动条移动时

#menu

淡出，以提供一个不那么混乱的界面。是否有代码允许这样做？

我想基本上我正在寻找的是如何捕获滚动条移动事件。滚动 1 秒后慢慢淡出

#menu

，滚动条不活动 2 秒后恢复

#menu

。

Answer 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;

不应影响布局。

Answer 2

正确使用以下内容：

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

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

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

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

Answer 3

我认为这就是您正在寻找的http://jsfiddle.net/wfPB6/