如何在向下滾動時隱藏div，然后在向上滾動時顯示div？

Question

好吧，我知道，我知道這可能會被問過幾次，但是在搜索之后我無法得到確切的答案。

基本上我想要的是當用戶開始向下滾動，在一定高度后div消失..並且它一直消失，直到用戶開始向上滾動。 當用戶開始向上滾動時，div再次出現。 我也需要某種淡入淡出效果。

到目前為止，通過查看其他答案，我已經想到了這一點。 有了這個，當你向下滾動時，div會在一定高度后消失，但只有當你向上滾動時達到相同的高度時它才會重新出現。 我希望div在用戶開始向上滾動時立即顯示。 此代碼也沒有任何動畫......

jQuery(window).scroll(function() {

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

Answer 1

我也不是最偉大的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-part中看到我做了兩個選項 - 一個是.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 ，僅在用戶第一次向上滾動時觸發事件，下次觸發切換時是向下滾動等等。 否則事件會被maaaaany時間觸發（您可以使用前面的代碼和.slideToggle()來測試它，以查看大量的事件觸發）。

重新編輯 ：我還添加了.stop() ，所以現在如果還有一個效果正在運行，那么效果會先停止，以防止用戶快速向上和向下滾動時出現延遲。

Answer 2

你可以試試headroom.js這是一個小小的javascript插件來做這個技巧。

Answer 3

我使用了你的代碼，只用.fadeIn和.fadeOut替換了.slideToggle() ，效果很好。