Question

我正在编码位于移动屏幕底部的粘性通知栏。我希望将条形图停留在用户屏幕的底部，直到用户到达代码中条形图实际所在位置的滚动位置为止（该位置恰好在页面页脚之前）。我已经从以下页面复制了“医生”示例：https://alligator.io/css/position-sticky/ 我的问题是：在页面上，使用Android设备或通过调整台式机上的浏览器宽度来模拟移动设备时，该栏都可以正常工作。但是，在iOS上，该条并不粘滞，即，它只是位于其位置，直到到达时才粘在屏幕底部。这适用于Safari和Google Chrome。奇怪的是：在前面提到的alligator.io页面上，它在我的iOS设备上运行正常。

我怀疑这是某种Webkit问题，与工具栏周围的代码有关，但我无法隔离它。我尝试通过尽可能地将代码调整到alligator.io中的示例来调试，但是我无法使其正常工作。我也尝试过在父元素中寻找任何溢出：自动-没有成功。我已经尝试修复了几个小时，对此问题感到厌倦，可以用另一双眼睛帮助我找到我所忽略的内容。

*.py

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

Answer 1

我觉得自己回答我的问题很白痴，但是我弄清楚了导致问题的原因。我希望这将有助于开发人员面对相同的问题，因为我找不到任何定义此行为的地方。

如您所见，在我的代码中，元素周围有一个包装器（特别是链接），在该包装器上我使用了我的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相对于其父容器（即链接）进行定位。删除链接以进行测试后，它可以在所有设备上使用。

Answer 2

my answer here中的一些技巧可能会有所帮助，特别是将display: block添加到您的容器中可能会达到目的。

Answer 3

i visit the website may be i found solution for you 
try this its may can help you:

//firstly remove
 //you repeat that in your code

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

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

Answer 5

对我来说，除了jQuery / javascript以外，其他方法均不起作用：给您需要保持粘性的元素：absolute和left：0，然后使用javascript计算窗口向左偏移，并将该偏移量添加到您元素的left属性：

.topTrailing

Answer 6

这是真正的答案

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

工作正常！

Answer 7

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

我希望能为您提供帮助。

Answer 8

我在这个问题上也有很多问题。粘性位置无法在我的手机上运行-在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>

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

8 个答案: