当滚动条随着 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屋！