时间戳

首页 > 解决方案 > TranslateX 打破了粘性导航栏

css - TranslateX 打破了粘性导航栏

问题描述

所以我制作了一个粘性导航栏以粘贴在页面顶部，在页面上我有我给 css 之类的段落和元素

.from-left{
     transform: translateX(-80%); } .from-right{
     transform: translateX(80%); } .from-left,.from-right{
    transition: opacity 500ms ease-in, transform 1000ms ease-in;
    opacity: 0; } .from-left.appear,.from-right.appear{
    transform: translateX(0);
    opacity: 1; }

然后我使用交叉点观察器让它们出现类，以便它们滑入。如果 firefox 工作正常，chrome 但是使我的导航栏不会粘在顶部，直到所有元素滑入它们的位置，一旦它们在导航栏中滑动粘到顶部和作品。我不知道为什么这适用于 Firefox 而不是 chrome 以及如何修复它，猜想我可以使元素位置绝对并重写东西，但我想避免这种情况。

标签： cssbootstrap-4

解决方案

推荐阅读