检查触摸设备上的scrollTop

Question

我有以下功能来检查用户的滚动位置,以便菜单一旦滚过标头就会固定

function checkScrolling() {
    if( $(window).scrollTop() > $('.masthead').height() ) { // we check against ACTUAL height
        $('.menu').addClass('fixed');
    }else {
        $('.menu').removeClass('fixed');
    }
}

这里是桌面和触摸屏事件监听器:

$(document).bind('touchstart touchend touchcancel touchleave touchmove', function(e){
    checkScrolling();
});

$(window).scroll(function(){
    checkScrolling();
});

然而,触摸事件仅在触摸移动期间可靠地使菜单固定.如果我通过向上或向下滑动来快速滚动,则在菜单固定或不固定之前会有一段延迟.

有想法该怎么解决这个吗？请参阅此处的代码示例:http://dev.driz.co.uk/mobileMasthead.html(已根据下面的一些答案进行了修改,但仍无法在iPad或iPhone上正常运行)

更新: 阅读有关主题的内容显示,在滚动期间不会发生JS检查滚动位置... 但是......我注意到http://www.facebook.com/home/没有这个问题在我的iPad上测试时.因此,在不使用任何自定义JavaScript滚动条(如iScroll或类似功能)的情况下,无疑可以实现此效果.

Answer 1

也许我理解错误的问题,但为了确保高速滚动的功能,为什么不用纯CSS方式解决它(也就是假装'花式'效果):

老学校(快速但原始)

HTML

<div id="menu2"></div>
    <div class="scroll" id="scroller">
        <div id="overlay"></div>
        <div id="menu"></div>
    </div>

使用简单的CSS:

html, body { overflow: hidden; height: 100% }
body { margin:0; padding:0; }

 .scroll {
     -webkit-overflow-scrolling: touch;
     height:960px;
     width:640px;
 }

 #menu2 {
     width:640px;
     height:20px;
     background:red;
     position:absolute;
     z-index:-1;
 }

 #menu {
     width:100%;
     height:20px;
     background:red;
     z-index:0;
 }

你可以在这里看到一个有效的例子.

它可能有点原始:但是嘿!有用!:)

新学校(花哨而又缓慢)

检查提供的所有其他答案.

但请注意,"已知"将JavaScript与移动设备上的滚动结合使用会对速度造成很大麻烦.

这就是为什么我认为简单的CSS方法可能会更好.

如果你想了解JavaScript并在移动设备上滚动(和其他功能),那么我强烈推荐阅读两篇文章:

• 使用iOS Webkit快速制作动画
• 原生滚动:Grins和Gotchas

Answer 2

Facebook不使用JavaScript而是使用纯CSS:

position: -webkit-sticky;

如果我记得正确的话,这会使元素在滚动时粘在其父容器的顶部.

Answer 3

您是否需要触摸事件来触发它？现代设备应该返回$(window).scroll()事件和scrollTop值。在较旧的 Android 和 ios5 之前的版本（我认为）上，position:fixed:由于视口的工作方式而无法按预期工作。但它已在所有新版本中得到纠正。

为了进一步调试设备，我强烈推荐 Adob​​e Edge Inspect。您可以console.log滚动顶部，看看您关心的设备是否确实正常工作，没有任何欺骗。通过他们的免费版本，您将获得所需的一切。