当滚动条与jQuery一起移动时，如何隐藏Div? [英] How to hide a Div when the scroll bar is moving with jQuery?

问题描述

我只希望#menu在滚动条移动时褪色以提供更整洁的界面.有没有允许这样做的代码?

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?

我想我基本上想要的是如何掌握滚动条移动事件.在滚动1秒钟后逐渐淡出#menu并在滚动条不活动2秒后恢复#menu.

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.

非常感谢您！

推荐答案

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秒钟后消失.

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.

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

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.

这篇关于当滚动条与jQuery一起移动时，如何隐藏Div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！