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/

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

还有其他解决方案使用fadeOut（）和fadeIn（）。在这种情况下，我对这些功能的唯一问题是，将display: none;设置为菜单div会影响页面的布局，其中设置visibility: hidden;或opacity: 0;不应影响布局。< / p>

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/

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

3 个答案: