我正在使用 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
事件,但没有成功。你能帮帮我吗?
最佳答案
看起来 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/
如果您找到解决方案,请告诉我,以便我更新帖子。我也会花一些时间在上面。谢谢阅读。 :)
关于javascript - 导航栏仅在 iOS 中向上滚动时显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23459199/