为什么我的位置：sticky不在iOS上工作？

我正在编写一个位于手机屏幕底部的粘性通知条。我希望将该条粘贴在用户屏幕的底部，直到用户到达代码中该条实际位置的滚动位置（就在页面页脚之前）。 我几乎复制了本页中的“医生”示例： 我的问题是：在我的页面上，当使用Android设备或通过调整桌面计算机上的浏览器宽度来模拟移动设备时，该条工作正常。然而，在iOS上，条并不粘，也就是说，它只是停留在它的位置，在到达之前不会粘在屏幕的底部。这适用于Safari和Google Chrome。 奇怪的是：在前面提到的alligator.io页面上，它可以在我的iOS设备上正常工作

我怀疑这是某种Webkit问题，与围绕着条的代码有关，但我无法将其隔离。我已经尝试过调试，将代码尽可能地调整为alligator.io中的示例，但无法使其正常工作。我也尝试过寻找任何溢出：在父元素中自动-但没有成功。我已经试着解决这个问题好几个小时了，我已经厌倦了这个问题，可以用另一双眼睛来帮助我找到我忽略的东西

#jobalarm#u mobile{
显示：表格；
字号：18px；
宽度：100%；
高度：40px；
背景：#ff8400；
颜色：白色；
字体大小：400；
文本对齐：居中；
职位：-网络工具包粘性；
位置：粘性；
底部：-50px；
自对准：柔性端；
}

---

我认为问题在于，Safari（iOS浏览器）不支持position:sticky。请阅读“已知问题”部分以查找aut更多信息。也许，你必须在iOS上停用它，并在你的页面上显示一个提示，说明它不能正常工作

---

我希望，我能帮助你。

我访问了一个网站，也许我能为你找到解决方案

试试这个，它可能会帮助你：

        #jobalarm_mobile {
             display: none !important;       
        } 

然后将您的通知

标签放在末尾（在

标签之后）

---

回答我自己的问题让我觉得自己像个白痴，但我发现了问题的根源。 我希望这将帮助开发人员面对同样的问题，因为我找不到任何地方定义这种行为

如您所见，在我的代码中，元素周围有一个包装器（特别是一个链接），我在其上使用我的位置：sticky:

<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
    <i class="fa fa-bell"></i>
    <span>Jobalarm aktivieren</span>
    <label class="switch">
        <input type="checkbox">
        <span class="slider round"></span>
    </label>
</div>
</a>

---

出于某种原因，这对于桌面上的Chrome或Firefox以及Android来说都不是问题，因为他们似乎忽略了这个容器，可能是因为它没有定义任何定位行为。这就是它在其他设备上工作的原因。但是，iOS不会忽略容器，因此会将div相对于其父容器（即链接）进行定位。出于测试目的移除链接后，它在所有设备上都能正常工作

中的一些提示可能会有所帮助，值得注意的是，向容器中添加

display:block

就可以了。

用于ios

position:-webkit sticky

和其他情况

position:sticky

对于我来说，除了jQuery/javascript之外，没有任何东西可以用这种方式工作：给你需要成为sticky的元素position:absolute和left:0，然后使用javascript计算窗口向左的偏移量，并将该偏移量添加到元素的left属性中：

#stickyElement {
        position: absolute;
        left: 0;
     }

  function scrolling(){
       $('.someElementScrollingLeft').on('scroll', function() {
           let offset = $(this).scrollLeft();
           /* For me it only didn't work on phones, so checking screen size */
           if($( window ).width() <= 768)
           {
              let stickyElement = $('#stickyElement');
              stickyElement.css("left", offset);
            } 
         });
   }

#粘滞元素{
位置：绝对位置；
左：0；
}
函数滚动（）{
$（'.someElementScrollingLeft'）。在（'scroll'，function（）上{
让偏移量=$（this.scrollLeft（）；
/*对我来说，它只在手机上不起作用，所以检查屏幕大小*/
如果（$（window）.width（）这是真正的答案

position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;

而且很有效！！！
我在这个问题上也遇到了很多问题。粘粘的位置在我的手机上不起作用-在Safari或Chrome中都不起作用

我试着将我想要的粘性元素放在周围包装的顶部-它起作用了！显然，如果在同一个父包装的顶部有东西，粘性位置就不能真正起作用。你不必改变你的顺序或设计，你只需在内容周围创建一个包装，粘性元素在顶

<div class="container">
    <p>Some text above the sticky element</p>
    <div class="inside-container">
        <div class="sticky-element">
            <p>This is sticky</p>
        </div>
        <p>Some more text, that scrolls past the sticky element.</p>
    </div>
</div>


粘滞元素上方的一些文本

这是粘性的

更多的文本，滚动通过粘滞元素

但是，这并不能解释为什么它在Chrome上也不起作用，以及为什么当我访问IOS上的alligator.io页面时它能起作用。请提供链接的上下文。如果链接失效，未来用户可能无法阅读“已知问题”部分。请查看如何在此处写出一个好的答案：@c42您确定您使用的IOS版本支持positi吗关于sticky？@Aongm是的。当访问提供示例的alligator.io页面时，它在我的iOS设备上运行良好。此外，在inspector中，位置：-webkit sticky标记处于活动状态。如果iOS版本不支持它，它将被禁用。@c42足够公平。我想投票否决这个答案，表明它无法解决您的问题。我希望有人可以帮你解决我遇到的一个类似问题，我的包装是一个span，通过添加display:block和position:-webkit sticky，ios解决了这个问题。谢谢。谢谢！你让我免于了一些头痛。这是一个非常好的地方，似乎ios不喜欢围绕sticky元素的包装。这可能是因为div是“独生子女"这里解释的问题：出于价值考虑，我在一个伪元素上使用了
position:sticky
：：在
之前，它在Firefox和Chromium上也很好地工作，但在Safari上没有。在伪元素样式上添加
display:block
，以及与粘滞相关的属性，它在任何地方都能工作。谢谢！与ab类似尽管对我来说，除了iOS上的chrome之外，sticky在任何地方都能工作（包括safari）
<div class="container">
    <p>Some text above the sticky element</p>
    <div class="inside-container">
        <div class="sticky-element">
            <p>This is sticky</p>
        </div>
        <p>Some more text, that scrolls past the sticky element.</p>
    </div>
</div>