css - Position Sticky:Sticky Nav 在 Safari 浏览器上不起作用
问题描述
我不知道我在这里做错了什么,但我的导航并没有粘在 safari 上的购物车顶部,有时它在其他浏览器上也不起作用,我真的不明白怎么做的。我已经尝试过为导航固定位置,但我的尝试都没有奏效。希望有人可以帮助我理解这里的问题。提前致谢。
<div class="cart">
<nav>
...
</nav>
</div>
.cart {
position: fixed;
overflow-y: scroll;
z-index: 10;
width: 100%;
height: 100%;
right: 0;
top: 0;
transform: translateX(100%);
background-color: white;
color: #ffff;
transition: 0.3s;
}
nav {
font-family: abeja;
position: sticky;
position: -webkit-sticky;
z-index: 11;
top: 0;
left: 0;
width: 100%;
padding: 20px;
display: flex;
background-color: #fff;
color: gray;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 13px 0 rgb(230, 230, 230);
}
解决方案
只需添加position: -webkit-sticky;
推荐阅读
- php - Symfony 4:无法自动装配参数 $manager ... 它引用了接口“Doctrine\Common\Persistence\ObjectManager”
- python - 与python分配作斗争
- c - 为什么这个函数不会陷入无限循环?
- iterm2 - 在 iTerm2 中禁用/更改默认键盘快捷键
- node.js - 与远程服务器的 TLS 身份验证
- bash - 计算一行的重复列,打印所有行及其计数
- c# - 输入字符串不正确 fromat:TimeSpan DisplayFormat
- regex - 缺少元素的正则表达式匹配排列
- c++ - 在 C++ 中是什么意思“它不拥有底层数据,因此复制或分配很便宜”
- ios - 尝试使用 React Native 广播 iBeacon