向上滾動後顯示導航菜單50px

我想在滾動時顯示粘滯菜單導航，同時在顯示導航菜單之前也有延遲。我可以用動畫和不透明來做到這一點，但效果並不理想。向上滾動後顯示導航菜單50px

我試圖從當前位置向上滾動50px時顯示導航菜單，但它不起作用。

這裏的腳本：

var previousScroll = 0, 
    headerOrgOffset = $('#header').height(); 

$('#header-wrap').height($('#header').height()); 

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    if (currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header-wrap').slideUp(); 
     } else { 
      $('#header-wrap').slideDown(); 
     } 
    } 
    previousScroll = currentScroll; 
});

FIDDLE DEMO

注：我看到這個功能在腳本Headroom.js

我怎樣才能做到這一點？

來源

2017-09-06 Imylor

您目前的設置僅佔卷軸大於headerOrgOffset。如果您希望幻燈片發生，您需要考慮滾動小於headerOrgOffset的情況。既然你也想要一個50px的緩衝區，我在else語句中加了一個-50。

var previousScroll = 0, 
     savedScroll = 0, 
    headerOrgOffset = $('#header').height(); 

$('#header-wrap').height($('#header').height()); 

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    if (currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header-wrap').slideUp(); 
      reappearScroll = currentScroll - 50; 
     } else { 
      if (currentScroll < reappearScroll) { 
       $('#header-wrap').slideDown(); 
      } 
     } 
    } 
    previousScroll = currentScroll; 
});

來源

2017-09-06 17:29:42

嗨Josepth，那不工作。 http://jsfiddle.net/dXQbk/411/ – Imylor

嗨@Imylor ...我更新了代碼。請讓我知道，如果這是你想要的。 –

Hello Josepth，首先感謝您的幫助，代碼不能像我想要的那樣工作，當向上滾動時從當前位置向上滾動50px後，我會顯示導航菜單，如下例所示：http://jsfiddle.net/fKqMN/23 /如果您滾動到底部然後向上滾動，請等待幾秒鐘並查看show nav。這個例子使用動畫和不透明，但我想做的不同。就像我的問題所說。 – Imylor

向上滾動後顯示導航菜單50px

回答

相關問題