Question

我一直在开发一个网站并利用相当不错的jQuery Sticky Kit插件。它通过将position属性切换为fixed并在适当时返回来进行操作。在桌面上运行非常顺畅，在移动设备中也可以接受。

或者至少过去曾经如此。 iOS 9带来了新的行为：如果元素的position从static / relative / absolute更改为fixed，而滚动动画正在进行中在滚动停止之前，元素变为不可见。奇怪的是，相反的变化（从fixed到其他任何变化）没有问题。

可以在the plugin's homepage找到一个工作示例。黑色导航栏（＆＃34;示例参考＆＃34;）应该是粘性的。最初它static位于页面中间。当你向下滚动时，它变为fixed并且（在iOS 9中）消失，直到滚动停止。桌面浏览器和iOS 8中的行为是正确的。

我有点希望得到典型的CSS解决方法：强制进行3D转换，禁用背面可视性等，模糊专有属性，......但似乎没有任何效果。

我们是否会忘记＆＃34;坚持＆＃34;现在它们一直在运作？

Answer 1

我有同样的问题，并且能够使用旧的“强制3D变换”技巧来破解它。只需设置要切换位置的元素，使其具有translate3d(0px,0px,0px)的转换属性。确保在更改位置属性之前完成此操作。

Answer 2

我发现正确工作的唯一解决方案是禁用固定项目的直接子项的z-index翻译，例如：

.is-sticky > * {
    -webkit-transform: translateZ(0);
}

Answer 3

我用一个额外的固定元素修复了这个问题。经过一些测试后，我发现它是第一个被修复的元素有这个问题。第二，第三等在iOS设备上运行良好。

所以，在你的身体开口标签后面右边放一个div.fixed-fix：

.fixed-fix {
    position:fixed;
    top:-1px; 
    height:1px; 
    width:100%; 
    background:white;
}

现在它有效！固定修复div 必须有背景颜色，因为否则它不会工作......

Answer 4

jQuery Sticky Kit 和其他类似的插件，即使编码良好，也会在iOS 9上呈现这种行为，并且这不是第一次出现这种情况。这里的要点是Firefox Safari和 Safari Mobile支持实验position: sticky; ，谷歌（Chromium）也是如此，但由于集成问题，不得不暂时禁用它，你可以阅读更多关于它here。话虽如此，我的猜测是，很快，position: sticky;将成为CSS规范的一部分并得到所有主流浏览器的支持，因此我认为解决此问题的最佳方法是使用polyfill而不是插件。当然，polyfill不会涵盖这些插件提供的所有功能和功能。然而，在许多情况下，使用polyfill将完成工作，作为所有主流浏览器支持的强大而有效的解决方案。在我看来，这是现在的方式。我个人使用stickyfill虽然我相信野外的其他polyfill会做到这一点。我只能说，因为我开始使用polyfill而不是插件，所以我没有任何浏览器兼容性问题。

Answer 5

将此添加到您的固定元素
使用混音： @include transform(translate3d(0px,0px,0px))
使用CSS： translate3d(0px,0px,0px)

iOS 9 Safari：在滚动时不会将元素更改为固定位置，直到滚动停止为止

5 个答案: