Как скрыть Div, когда полоса прокрутки движется с jQuery? - PullRequest
Новая
       22

Как скрыть Div, когда полоса прокрутки движется с jQuery?

5 голосов
/ 12 сентября 2011

Я просто хочу, чтобы #menu исчезал, когда полоса прокрутки перемещается, чтобы обеспечить менее загроможденный интерфейс.Есть ли код, который позволил бы это?

Полагаю, в основном я ищу то, как захватить событие перемещения полосы прокрутки.Медленное исчезновение #menu после 1 секунды прокрутки и возврат #menu после 2 секунд бездействия полосы прокрутки.

Большое спасибо!

Ответы [ 3 ]

5 голосов
/ 12 сентября 2011 
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 секунды.

Существуют и другие решения, использующие fadeOut () и fadeIn (). Моя единственная проблема с этими функциями в этом случае заключается в том, что установка display: none; для div меню повлияет на макет страницы, где установка visibility: hidden; или opacity: 0; не должна влиять на макет.

3 голосов
/ 12 сентября 2011

Право, используя следующее: 

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

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

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

Итак, мы записываем сумму прокрутки, ждем 200 миллисекунд и затем видим, изменился ли прокрутка, если нет, то мы снова исчезаем из меню.

0 голосов
/ 12 сентября 2011

Я думаю, это то, что вы ищете http://jsfiddle.net/wfPB6/

...