How to hide a div when a scrollbar moves with jQuery?

Question

I just want it to #menudisappear when the scrollbar moves to provide a less cluttered interface. Is there any code that will allow this?

I assume that I'm mostly looking for how to capture a scrollbar motion event. To gradually fade #menuafter 1 second of scrolling and return #menuafter 2 seconds of inactivity of scrolling.

Thank you very much!

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/

. -, . , , - . , -. , 2 .

, fadeOut() fadeIn(). , display: none; div , visibility: hidden; opacity: 0; .

Answer 2

:

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

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

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

, , 200 , , , .

Answer 3

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