Question

这仅适用于移动设备

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

在iOS中，当滚动固定元素时会超出运行状态并且似乎滚动屏幕直到释放。

这是我的设置：

CSS

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

JS

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：触摸正文和html，但这没有效果。
我也尝试使用静态，但这会将元素修复到html中的位置。
我尝试了两个元素的工作，on是固定元素，一个是相对元素，只是分别隐藏/显示元素。我仍然有固定元素的问题似乎继续滚动，直到我松开手指。
我也尝试使用粘贴而不是固定，这会阻止元素粘在视口的顶部
我还试图使用插件stickyjs和jquery sticky-kit，这些也提出了同样的问题。

Answer 1

这是由于路径的变化引起的：在iOS9 +中处理已修复，显然是设计的。

最简单的解决方案我发现它可以防止固定元素子元素的z-index转换，例如：

.is-sticky {

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

在iOS上滚动问题上的粘性元素

1 个答案: