向下滚动时隐藏菜单，向上滚动时显示，适用于Chrome，不适用于Safari(手机）

Hide Menu on Scroll Down, Show on Scroll Up, Works in Chrome, Not in Safari (mobile)

本文关键字：适用于 滚动 Safari 手机 不适用 显示 隐藏菜单 Chrome      更新时间：2023-09-26

因此，我使用此代码在向下滚动时隐藏导航栏，并在用户再次向上滚动时显示它。

它在桌面、所有浏览器上都很好，在移动设备（iPhone）上的Chrome中也很好，但在Safari中，slideUp/slideDown表现得很疯狂，有时它会显示、隐藏、显示隐藏导航条好几次，然后就消失了。

就好像该事件被多次触发一样。

这是的工作代码

   var lastScrollTop = 0, delta = 5;
   $(window).scroll(function(event){
   var st = $(this).scrollTop();
   if(Math.abs(lastScrollTop - st) <= delta)
      return;
   if (st > lastScrollTop){
       // downscroll code
       $("#soulnavbar").slideUp()
   } else {
      // upscroll code
      $("#soulnavbar").slideDown();
   }
   lastScrollTop = st;
});

http://jsfiddle.net/5n630gs2/1/

还有我正在使用的网站http://www.carbsanity.com/

有人能告诉我为什么它在Safari上会这样吗？如果我能做些什么的话？：-）

谢谢！

问题是移动浏览器不支持"真实"滚动事件。滚动事件仅在窗口停止滚动后触发。它没有及时做出反应。

您需要第三方来处理滚动，例如Iscroll。

相关文章：