向上滚动后显示导航菜单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

回答

相关问题