如何在滚动条移动时隐藏Div

How to hide a Div when the scroll bar is moving with jQuery?

本文关键字：隐藏 Div 移动 滚动条      更新时间：2023-09-26

我只是希望#menu在滚动条移动时褪色，以提供一个不那么混乱的界面。有允许这样做的代码吗?

我想基本上我要找的是如何抓取滚动条移动事件。滚动1秒后，#menu缓慢淡出，滚动2秒后，#menu恢复。

非常感谢!

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;不应该影响布局。

右用:

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

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

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

相关文章：