我正在编码位于移动屏幕底部的粘性通知栏.我希望将条形图停留在用户屏幕的底部,直到用户到达代码中条形图实际所在位置的滚动位置为止(该位置恰好在页面页脚之前).
我已经从以下页面复制了“医生”示例：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,则不会弹出…)
在此先感谢您的帮助.