iPhone上IOS 9版本中，如何使用JQuery实现滚动时粘性菜单？

Question

在我更新到iOS 9.0.1 (13A404)之前，这段代码在我的iPhone上运行正常，但现在同样的代码似乎只有在手指离开屏幕后或在jQuery的onscroll结束后才能工作，当我快速滑动页面时...

$(document).on('scroll', function(){
    if( $(this).scrollTop() > 0){
        $('.menu').addClass('sticky');
    }else{
        $('.menu').removeClass('sticky');
    }
});

粘性菜单在我松开手指之前就消失了，在我之前所有的网站上都有实时的滑动效果，现在都破了...如何解决这个问题，让它们像以前一样工作呢？（平稳的实时粘性）

- neoDev

---

为什么元素一开始就不能有粘性类呢？ - IonDen

@IonDen 我已经尝试过从一开始设置固定位置，但是如果我在其他元素之间有粘性菜单（例如在页面顶部的标题后面），我无法弄清楚如何做。 - neoDev

@neoDev，iOS的新版本可能会通过在滑动过程中显示网页的静态图片来“改善”用户体验。你可以通过创建一个简单的跑马灯页面来测试这一点。 - Popnoodles

@Popnoodles 是的，我已经创建了一个非常简单的页面来进行测试。 - neoDev

动画在滑动/滚动时暂停还是继续播放？ - Popnoodles

Answer 1

在观察相同的行为并进行一些测试后，最简单的方法是激活3D变换，就像类似问题中提出的：

.sticky-element {
   -webkit-transform: translate3d(0px,0px,0px);
}

- Paracetamol

---

太好了！这解决了我在iPhone6上使用StickyJS插件时遇到的问题。它只有在滚动停止后才会吸附到指定位置，但是在将这段CSS添加到我想要固定的类/元素后，它就可以正常工作了。我没有安卓设备来测试，但只要在iPhone上能用就很开心。 - moonunit7

客户端更改渲染行为的问题在于没有任何库能够预测这种情况，所有解决方案都会同时失效。 - Paracetamol

Answer 2

我看到了相同的情况。似乎iOS9不想在滚动事件结束之前绘制position:fixed元素。

例如：http://senaeh.de/demo/stickyheaders/simple/ 新的固定头部将不会显示，直到页面停止滚动或用户从屏幕上移开手指。其他CSS更改，如background-color正常工作。

这是自iOS8以来的退化。不幸的是，ios9.0.1的粘性标题仍然不流畅。它们在老旧的Android设备上仍然运行良好，所以我不确定这是一个错误还是苹果正在尝试增加电池寿命。

编辑：我向苹果提交了一个错误报告(#22902083)，希望他们能更新解决这个问题。

- Scott L

---

在这里观察到完全相同的行为。 - Paracetamol