导航栏随着 CSS 动画消失答案

【问题标题】：Navigation bar disappears with CSS animations导航栏随着 CSS 动画消失
【发布时间】：2016-05-04 06:25:53
【问题描述】：

我正在使用 Animate.css 库中的 CSS3 动画。它们非常好，当我将它们与 WOW.js 结合使用时，它们可以完美运行

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

如何避免这种情况发生？我不希望我的固定导航栏消失，永远。

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案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 的问题。希望这个解决方案可以帮助那些拼命寻找修复的人。这是帮助我解决问题的唯一方法。

【讨论】：