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

I just want the #menu to fade when the scroll bar is moving to provide a less cluttered interface. Is there code that would allow this?

我只是想让#菜单在滚动条移动时淡出，以提供一个不那么杂乱的界面。有允许这样做的代码吗?

I guess basically what I'm looking for is how to grab the scroll bar movement event. To slowly fade out the #menu after 1 seconds of scrolling and bring back the #menu after 2 second of scroll-bar inactivity.

我想基本上我要找的是如何抓取滚动条移动事件。在滚动1秒后慢慢淡出#菜单，在滚动条停止2秒后返回#菜单。

Thank you so much!

谢谢你这么多!

3 个解决方案

#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/

This sets the scroll event to do a few things. First it clears a timeout to fade the menu div back in. After that, if the menu isn't already faded out, it fades the menu out and sets the timeout in the callback. If the menu is already faded out, it just sets the timeout. If the user stops scrolling, the menu will fade back in after 2 seconds.

这将使滚动事件做一些事情。首先，它清除超时以使菜单div返回。之后，如果菜单还没有淡出，它将淡出菜单，并在回调中设置超时。如果菜单已经淡出，它将设置超时。如果用户停止滚动，菜单将在2秒后返回。

There are other solutions that use fadeOut() and fadeIn(). My only issue with those functions in this case is that setting display: none; to the menu div will affect the layout of the page, where setting visibility: hidden; or opacity: 0; shouldn't affect the layout.

还有其他使用fadeOut()和fadeIn()的解决方案。我对这些函数的唯一问题是设置display: none;对菜单div将影响页面布局，其中设置可见性:隐藏;或不透明度:0;不应该影响布局。

#2

Right using the following:

正确使用以下:

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

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

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

So we record the scroll amount, wait 200 milliseconds and then see if the scroll has changed, if not we fade the menu back in.

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

#3

I think this is what you are looking for http://jsfiddle.net/wfPB6/

我认为这就是您要查找的http://jsfiddle.net/wfPB6/

#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);
    }
});