gpt4 book ai didi

css - 粘性位置不适用于 safari 移动版

转载 作者:太空宇宙 更新时间:2023-11-03 22:23:36 26 4
gpt4 key购买 nike

我希望我的导航栏是粘性的。 css 在我的桌面上与 Chrome 一起工作正常,但是当我尝试在我的 iPhone 上查看它时,导航栏不再固定。我试图弄乱 body 溢出并在其他元素上应用粘性位置,但无法让它工作。不确定哪里出了问题或如何解决此问题。我正在为我的应用程序使用 Angular 6,并希望避免使用 JS 或 Jquery 来解决这个问题。

app.component.html

<div class="contact-info"></div>

<app-navbar>
<div class="outer">
<div class="inner">
<nav class="navbar">
my navbar links......
</nav>
</div>
</div>
</app-navbar>
<router-outlet></router-outlet>
<app-footer-bar></app-footer-bar>

navbar.component.css

.outer {
position: -webkit-sticky;
position: sticky;
top: 0px;
background-color: white;
width: 100%;
z-index: 9;
}

最佳答案

粘滞在 IE/Edge 15 或更早版本中不受支持。在带有 -webkit- 前缀的 Safari 6.1 版本中受支持。

为了测试它,我创建了下面的代码片段,它在 MacOS 上的 Safari、Chrome、Firefox 上运行良好。

.outer {
position: -webkit-sticky;
position: sticky;
top: 0px;
background-color: white;
width: 100%;
z-index: 9;
}

body {
height: 1000px;
}
<body>
<div class="outer">
<div class="inner">
<nav class="navbar">
my navbar links......
</nav>
</div>
</div>
</body>

关于css - 粘性位置不适用于 safari 移动版,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52485692/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com