javascript - 检查触摸设备上的scrollTop

Question

我有以下函数来检查用户的滚动位置，以便一旦用户滚动经过 header ，菜单就会固定

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;
 }

您可以看到一个工作示例 HERE .

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

新学校(花哨但缓慢)

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

但请注意，众所周知，在移动设备上结合使用 JavaScript 和滚动会导致速度方面的很多问题。

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

如果您想了解 JavaScript 和移动设备上的滚动(以及其他功能)，那么我强烈建议您阅读两篇文章:

• Fast animations with iOS Webkit
• Native scrolling: Grins and Gotchas