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

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 ...,则不会弹出)。在此先感谢您的帮助。

c42

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么百分比高度在我的div上不起作用?

为什么垂直对齐:中层在我的span或div上不起作用?

为什么我的散景图在github上不起作用?

为什么会溢出:隐藏在我的div上不起作用?

为什么固定位置在iOS上的flex上不起作用?

为什么我的Arquillian Drone功能测试在GitLab CI上不起作用?

为什么width属性在我的桌子上不起作用?

为什么我的过渡在<hr>上不起作用?

为什么$ .post()在iOS上不起作用?

为什么CSS模块样式在我的元素RMWC上不起作用?

为什么此JavaScript在我的网站上不起作用?

为什么我的循环在GoogleSheets上不起作用?

为什么tintColor在iOS7的导航栏或工具栏上不起作用

为什么我的代码在设备上不起作用,但在模拟器上起作用?

为什么paper.js路径创建在iOS设备上不起作用?

为什么#!/ usr / bin / env bash在我的系统上不起作用?

为什么我的CSS在我的Rails应用程序上不起作用?

为什么“主机名--fqdn”在我的Ubuntu计算机上不起作用?

为什么我的CSS动画在侧边栏上不起作用?

为什么我的.pagnation li add active在第1页上不起作用?

为什么此文本输入在iOS上不起作用?

为什么我的 IF 语句在 python 上不起作用?

为什么 jh_magnificpopup 在我的网站上不起作用?

为什么我对 OVH 的 API 调用在我分配的 ipBlock 上不起作用?

为什么我的 PHP 套接字在公共网站上不起作用?

为什么我的 `<table>` 上的 `position:sticky` 不起作用?

为什么 QuerySelectorAll 在我的模态页面上不起作用

为什么我的删除功能在我的桌子上不起作用

为什么我的删除功能第二次在我的桌子上不起作用