iOS上滚动问题的粘性元素答案

【问题标题】：Sticky Element on scroll issue on iOSiOS上滚动问题的粘性元素
【发布时间】：2017-01-20 21:07:55
【问题描述】：

这仅适用于移动设备

我有一个相对定位的元素，当滚动位置大于元素的顶部位置时，该元素将固定在屏幕顶部。

在 iOS 中，当滚动固定元素时，会溢出并显示为滚动到屏幕之外直到释放。

这是我的设置：

CSS

.sticky-element {
    position: relative;
}
.fixed-state {
    position: fixed;
    top: 0;
}

var orgStick = $('.sticky-element').position().top;
$(document).on("scroll", function(e) {
    if ($(document).scrollTop() > orgStick) {
        $('.sticky-element').addClass("fixed-state");
    }
    else {
        $('.sticky-element').removeClass("fixed-state");
    }
});

我在声明位置之前尝试将 transform3d 添加到 .fixed-state ，但这没有效果。我也尝试过使用 touchstart 和 scrollstart 而不是滚动。 touchstart 没有改变任何东西，而 scrollstart 完全停止了位置的改变。

Here is a jsFiddle simulating what I have done

如何在 iOS 上滚动时将元素固定在视口的顶部？

我尝试过的：

-webkit-overflow-scrolling：触摸 body 和 html 但没有效果。
我也尝试过使用静态，但这会将元素固定到它在 html 中的位置。
我尝试了一种解决方法，我有 2 个元素，一个是固定元素，一个是相对元素，分别隐藏/显示元素。在我松开手指之前，我仍然遇到固定元素似乎继续滚动的问题。
我也尝试过使用sticky而不是fixed，这阻止了元素粘在视口顶部
我也尝试过使用插件stickyjs和jquery sticky-kit，这些也出现了同样的问题。

【问题讨论】：

是的，位置：fixed 似乎受到 iOS Safari 的严重支持。 -webkit-overflow-scrolling: touch 工作吗？我没有 iPhone，所以无法查看。
或位置：静态？
Static 似乎不会将元素保持在视口的顶部，它只是将元素保持在代码中的位置。我在这里发现：w3schools.com/css/css_positioning.asp static 也不受 top 属性的影响。
我也没有 iPhone，我使用模拟器 BrowserStack，但它本身可能有问题。您提到的 -webkit-overflow-scrolling: touch 不是标准功能，但我尝试了它并没有任何区别。我将它应用于 css 中的 body 和 html。
我也没有从 BrowserStack 得到 iPhone 模拟器的东西正常工作。整个班级都没有被添加，滚动似乎也不重要。但也许是因为我使用的是小提琴。它不是标准的，但 Safari 是基于 webkit 的，所以它应该采取。在我的工作中，我们使用相同的 zindex 固定位置，所有这些似乎都有效，但它不适用于您的项目。我真的不知道为什么......

标签： javascript jquery ios ios9 sticky

【解决方案1】：

这是由于在 iOS9+ 中处理 position:fixed 的方式发生了变化，显然是设计使然。

我找到的最简单的解决方案是防止对固定元素的子元素进行 z-index 转换，例如：

.is-sticky {

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

【讨论】：

这在 Safari 13 中对我不起作用...在您的项目中仍然有效吗？