为什么我的 position:sticky 在 iOS 上不起作用？

Question

我正在编写位于移动屏幕底部的粘性通知栏。我希望该栏卡在用户屏幕的底部，直到用户到达该栏在代码中实际定位的滚动位置（就在页面页脚之前）。我几乎从这个页面复制了“医生”的例子：https://alligator.io/css/position-sticky/ 我的问题是：在我的页面上，当使用 Android 设备或通过调整台式计算机上的浏览器宽度来模拟移动设备时，该栏工作正常。但是，在 iOS 上，该条不是粘性的，即它只是停留在它的位置并且在到达之前不会粘在屏幕底部。这适用于 Safari 和 Google Chrome。奇怪的是：在前面提到的 alligator.io 页面上，它在我的 iOS 设备上工作正常。

我怀疑这是与栏周围的代码有关的某种 Webkit 问题，但我无法将其隔离。我已经尝试通过尽可能调整我的代码来调试 alligator.io 中的示例，但我无法让它工作。我也尝试在父元素中寻找任何 overflow:auto - 但没有成功。我已经尝试解决这个问题几个小时了，我已经厌倦了这个问题，我可以用另一双眼睛来帮助我找到我忽略的东西。

#jobalarm_mobile {
    display: table;
    font-size: 18px;
    width: 100%;
    height: 40px;
    background: #ff8400;
    color: white;
    font-weight: 400;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    bottom: -50px;
    align-self: flex-end;
}

<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>

您可以访问我正在做的直播页面（应客户要求隐藏，请私信）。只需开始任何（建议的）搜索，该栏就会弹出（或者不弹出，如果您使用的是 iOS...）预先感谢您的帮助。

Answer 1

我认为问题在于，Safari（iOS 的浏览器）不支持 position: sticky 正确。 See this Article (https://caniuse.com/#feat=css-sticky)。阅读 已知问题 部分以查找更多信息。也许，您必须为 iOS 停用它并在您的页面上显示一条注释，表明它无法正常工作。

希望能帮到你

Answer 2

我访问了一个网站，也许我找到了适合您的解决方案。

试试这个可能对你有帮助：

        #jobalarm_mobile {
             display: none !important;       
        }

然后将通知 <a> 标签放在最后（在 <footer> 标签之后）

//write this css
     .jobAlertToggle{
              display: none;
           }
        @media (max-width: 767px)
          .jobAlertToggle{
              display: block;
              width: 100%;
              position:sticky;
              position:-webkit-sticky;
              bottom:-50px;
           }
    
          #jobalarm_mobile {
               display: table;
               font-size: 18px;
               width: 100%;
               height: 40px;
               background: #ff8400;
               color: white;
               font-weight: 400;
               text-align: center;
               -webkit-align-self: flex-end;
               align-self: flex-end;
           }

Answer 3

我觉得自己回答自己的问题像个白痴，但我想出了导致问题的原因。我希望这能帮助面临同样问题的开发人员，因为我找不到定义此行为的任何地方。

如您所见，在我的代码中，元素周围有一个包装器（特别是 link），我在其上使用我的 position: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 相对于其父容器 link 定位。出于测试目的删除 link 后，它适用于所有设备。

Answer 4

中的一些提示可能会有所帮助，特别是将 display: block 添加到您的容器中可能会有所帮助。

Answer 5

用于 ios position: -webkit-sticky 和其他情况 position: sticky

Answer 6

对我来说，除了 jQuery/javascript 之外没有任何效果：给你需要粘性的元素 position:absolute 并留下：0，然后使用 javascript 计算 window 到左侧，并将该偏移量添加到元素的左侧属性：

#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);
            } 
         });
   }

Answer 7

这才是真正的答案

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

并且有效！！！

Answer 8

这个问题我也有很多问题。粘滞位置不适用于我的 phone - 不适用于 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>

Answer 9

在我的全屏菜单中，它是 overflow-y: auto。我通过添加以下内容消除了这个问题：overscroll-behavior: contain.

Answer 10

我的问题是：

我有{包含：油漆； } 在祖先中（inside-container 上方的容器）。

改为{ overflow: clip; }

如果 contain: paint 无论是否有 overflow: clip 都存在，粘性将不起作用。

这是在 Iphone 15.4.1 上测试的。其他测试的设备没有破坏包含：paint（在 chrome、ipad、android 上测试）

为什么我的 position:sticky 在 iOS 上不起作用？

Why is my position:sticky not working on iOS?

css

webkit

sticky

ios