小编c42*_*c42的帖子

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

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

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

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

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