我使用headroom.js在滚动时隐藏/显示导航栏。效果很好。向上滚动时,导航具有纯色背景,当导航位于顶部时,背景应该是透明的。Chrome 没有问题,但 Safari 有问题。
标记:
<header class="headroom navigation">
<div> class="navigation__bg">...</div>
</header>
CSS:
.headroom--not-top {
.navigation__bg {
background-color: red;
}
}
.headroom--pinned {
transform: translateY(0%);
.navigation__bg {
background-color: transparent; // becomes black on Safari most times
}
}
.headroom {
will-change: transform;
transition: transform .5s linear;
}
我不明白为什么bg会变黑。任何原因?