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

Question

我正在使用 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/网址。

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

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

Answer 1

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

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

或者，您可以直接在 touchmove 上运行 hasScrolled()。这似乎会导致一些闪烁(至少在我的 iPad 上是这样)，因此您可能需要想出一种不同的方式来为滚动条设置动画:

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

请看这里的 fiddle : http://jsfiddle.net/mariusc23/7HrK7/13/

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