Question

我正在iPad上测试这个网站： http://www.cherrystoneauctions.com/test

当您向下滚动页面时，蓝色大理石背景的导航按钮位于视图区域的顶部上方，我会重新定位这些菜单，使它们“粘在”屏幕顶部：

$(window).on('scroll', function(){
    if ($('html').offset().top<-116){
        $('#fixnav').addClass('fixed');
    } else {
        $('#fixnav').removeClass('fixed');
    }
});

如果向上滚动，它们会像平常一样“解开”。

这在计算机屏幕上运行良好，但使用iPad时，滚动停止前不会触发“滚动”事件。因此，如果您用手指轻弹屏幕，它将滚动，一旦滚动停止，它就会计算固定/非固定导航菜单......这看起来不太好。我需要它基本上不断计算，所以当滚动超过116像素时，它会立即修复/取消固定菜单。

有没有办法让这个触发器在iPad上运行得更顺畅？谢谢！

Answer 1

我对此的解决方法是使用触摸事件而不是滚动事件。基本思路是：

检测手指何时触及屏幕（touchstart）并保存此x / y坐标。我还节省了时间，因此我可以尝试检测用户正在做什么。
检测手指何时移动并记录移动到的位置（touchmove）。当手指移动时，您可以将其用作伪 - scroll事件处理程序。您考虑当前scrollTop()值以及用户移动手指的距离量的位置。将这些添加在一起会为您提供伪滚动位置。
检测手指何时离开屏幕表面并进行清理，例如删除为此卷轴拍摄的数据，以便下次重新开始。

希望有所帮助。一路上会有警告，但欢迎您回来并在Stack Overflow上提出这些问题。

Answer 2

在Mobile Safari上，滚动事件会在滚动时暂停，以帮助提高性能，因此滚动处理程序仅在滚动停止后触发一次。您将需要使用诸如iScroll之类的滚动库来解决此限制。

使用jQuery在iPad上检测滚动仅在滚动停止时有效

2 个答案: