导航栏仅在 iOS 中向上滚动时显示

Posted 2023-03-14

【中文标题】导航栏仅在 iOS 中向上滚动时显示

【英文标题】：Navbar show only when scrolling up in iOS

【发布时间】：2014-05-04 17:21:14

【问题描述】：

当用户向上滚动时，我使用Marius Craciunoiu technique 来显示我的整个导航栏。

所以，这是我的 JavaScript（使用 jQuery）代码：

var delta, didScroll, lastScrollTop, navbarHeight;

delta = 5;
lastScrollTop = 0;
navbarHeight = $('.navbar').outerHeight();

$(window).on('scroll touchmove', function() 
  didScroll = true;
);

setInterval(function() 
  if (didScroll) 
    hasScrolled();
    didScroll = false;
  
, 250);

function hasScrolled() 
  var scrollTop = $(this).scrollTop();

  if (Math.abs(lastScrollTop - scrollTop) <= delta)  return; 

  if (scrollTop > lastScrollTop && scrollTop > navbarHeight) 
    $('.navbar').addClass('scrolling');
   else 
    if (scrollTop + $(window).height() < $(document).height()) 
      $('.navbar').removeClass('scrolling');
    
  

  lastScrollTop = scrollTop;

为了更轻松，我将我的代码发布在http://jsfiddle.net/caio/7HrK7/。如果要在 ios 中测试，请使用 http://fiddle.jshell.net/caio/7HrK7/show/light/ url。

视频： http://hiperload.com/s/ua5k53n0x/d.mp4?inline

如您所见，我的代码适用于台式机和 android 手机。但是在 iOS 上，它需要一个触摸事件来响应，而滚动事件仍然发生，否则它只会在最后执行。我尝试添加 touchmove 事件，但没有成功。你能帮帮我吗？

【参考方案1】：

看起来 iOS 在滚动时暂停了所有计时器。也许您在这里尝试该技术会有一些运气：

iOS 6 js events function not called if has setTimeout in it

或者，您可以直接在touchmove 上运行hasScrolled()。这似乎会导致一些闪烁（至少在我的 iPad 上），因此您可能必须想办法为滚动条设置动画：

$(window).on('touchmove', function() 
  hasScrolled();
);

在这里看一个小提琴： http://jsfiddle.net/mariusc23/7HrK7/13/

如果您找到解决方案，请告诉我，以便我更新帖子。我也会花一些时间在上面。谢谢阅读。 :)