Question

我正在使用Animate.css库中的CSS3动画。它们非常好用，当我将它们与WOW.js结合使用时，它们的效果非常好。

但是，当我向下滚动页面并且动画进入屏幕时，屏幕顶部的固定导航栏会消失几秒钟，即动画显示的时间，然后它会返回到屏幕

我怎样才能避免这种情况发生？我不希望我的固定导航栏消失。

Answer 1

我修好了！经过多次尝试，我删除了固定导航栏部分的z-index属性，现在它不再消失。

Answer 2

有几种不同的方法可以解决此问题。

1。）第一个（对我不起作用）是附加的：

.your_element_with_position_fixed {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

归因于具有position: fixed;属性的“浮动元素”。

2。）第二种方法（与Animate.css，WOW.js和AOS一起使用对我有用）是将overflow-x: hidden;添加到body或包含动画的容器元素中例如section。在CSS文件中使用以下规则：

body { overflow-x: hidden; }

或

section { overflow-x: hidden; } // or any other container element which contains your animation

我在AOS信息库中的一个问题中偶然发现了此解决方案here。此外，还为animate.css讨论了问题here。希望此解决方案可以帮助那些急切寻求解决方案的人。这是唯一为我解决问题的东西。