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

【问题标题】：Navbar show only when scrolling up in iOS导航栏仅在 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 事件，但没有成功。你能帮帮我吗？

【问题讨论】：

标签： javascript ios touch mobile-safari

【解决方案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/

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

【讨论】：