Как скрыть div при прокрутке вниз, а затем показать его при прокрутке вверх?

Хорошо, медведь со мной, я знаю, что это, возможно, было задано несколько раз, но я не могу получить точный ответ после небольшого поиска.

В принципе, я хочу, так как пользователь начинает прокручивать вниз, после определенной высоты div исчезает.. и он остается скрытым до тех пор, пока пользователь не начнет прокручивать вверх. Когда пользователь начинает прокручивать вверх, снова появляется div. Мне также нужны какие-то эффекты затухания.

Это то, что я придумал, просмотрев другие ответы. При этом div исчезает после определенной высоты, когда вы прокручиваете вниз, но он снова появляется, когда вы достигаете той же самой высоты при прокрутке вверх. Я хочу, чтобы div сразу показывался, когда пользователь начинает прокручивать вверх. В этом коде нет анимации...

jQuery(window).scroll(function() {

    if (jQuery(this).scrollTop()>0)
     {
      jQuery('.myDIV').fadeOut();  
     }
    else
     {
      jQuery('.myDIV').fadeIn();
     }
 });

Ответы

Ответ 1

Вы можете попробовать headroom.js, который является небольшим плагином javascript, чтобы сделать трюк.

Ответ 2

Я тоже не самый большой JQuery-художник, но я думаю, что это должно работать:

var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
    if(mywindow.scrollTop() > mypos)
    {
        $('.myDIV').fadeOut();  
    }
    else
    {
        $('.myDIV').fadeIn();
    }
    mypos = mywindow.scrollTop();
 });

Вы можете видеть, что mypos обновляется каждый раз, когда пользователь прокручивает, вверх или вниз.

Изменить

Я сделал некоторые обновления по вашему запросу в скрипте: http://jsfiddle.net/GM46N/2/. Вы можете увидеть в js-части скрипта, что я сделал два варианта: один с .fadeIn() и .fadeOut() (на этот раз работая - на вашем сайте код, который я предоставил, не работает), второй - используя .slideToggle().

Здесь обновлены js:

var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var newscroll;
mywindow.scroll(function () {
    newscroll = mywindow.scrollTop();
    if (newscroll > mypos && !up) {
        $('.header').stop().slideToggle();
        up = !up;
        console.log(up);
    } else if(newscroll < mypos && up) {
        $('.header').stop().slideToggle();
        up = !up;
    }
    mypos = newscroll;
});

Я также добавил дополнительную переменную up, чтобы только запускать события, когда пользователь прокручивается в первый раз, а при следующем запуске переключения - когда он прокручивает вниз и так далее. В противном случае события запускаются в мааааанах (вы можете протестировать его, используя предыдущий код с .slideToggle(), чтобы увидеть огромное количество событий).

перередактировать. Я также добавил .stop(), так что теперь, если есть эффект, который запускает этот эффект, сначала останавливается, чтобы предотвратить задержку, если пользователь быстро прокручивает вверх и вниз.

Ответ 3

Я использовал ваш код, просто заменил .slideToggle() на .fadeIn и .fadeOut, и это получилось отлично.