问题
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.
回答1:
I fixed it! After many tries I deleted the z-index property of the fixed navbar section and now it doesn´t disappear anymore.
回答2:
There are a few different approaches to solve this problem.
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.) 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; }
or
section { overflow-x: hidden; } // or any other container element which contains your animation
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.
来源：https://stackoverflow.com/questions/35035048/navigation-bar-disappears-with-css-animations