导航栏随CSS动画一起消失 [英] Navigation bar disappears with CSS animations

问题描述

我正在使用Animate.css库中的CSS3动画.当我将它们与WOW.js结合使用

I am using the CSS3 animations from the Animate.css library. They are real nice and they work perfectly when I combine them with WOW.js

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

However, when I am scrolling down the page and the animations go into the screen, my fixed navigation bar on top of the screen disappears for a couple seconds, the time the animation is displaying, and then it goes back into the screen.

如何避免这种情况发生?我不希望我的固定导航栏消失.

How can I avoid this to happen? I don´t want my fixed navigation bar to disappear, ever.

推荐答案

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

There are a few different approaches to solve this problem.

1.)第一个(对我不起作用)是附加的:

1.) The first one (which did not work for me) is to attach:

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

具有"位置:固定； 归因"的浮动元素".

to your "floating elements" which have the position: fixed; attribution.

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

2.) The second approach (which did work for me together with Animate.css, WOW.js and AOS) is to add overflow-x: hidden; to the body or your container elements which contain the animation e.g. section. Use this rule within your CSS file:

body { overflow-x: hidden; }

或

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

我在此处内偶然发现了此解决方案.此外，还在此处讨论了animate.css的问题.希望此解决方案可以帮助那些急切寻求解决方案的人.这是唯一可以帮助我解决问题的东西.

I stumbled over this solution here within an issue in the AOS repository. Additionally the problem was also discussed here for animate.css. Hope this solution helps someone who is desperately searching for a fix. This was the only thing that helped fixing the problem for me.

这篇关于导航栏随CSS动画一起消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！