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

Question

我只是想在#menu滚动条移动时淡出以提供更简洁的界面.有代码可以允许吗？

我想基本上我正在寻找的是如何抓住滚动条运动事件.要#menu在滚动1秒后慢慢淡出,并在#menu滚动条不活动后返回2秒钟.

非常感谢!

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/

这会将scroll事件设置为执行一些操作.首先,它会清除超时以淡化菜单div.之后,如果菜单尚未淡出,则会淡出菜单并在回调中设置超时.如果菜单已经淡出,则只设置超时.如果用户停止滚动,菜单将在2秒后淡入.

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