如何将fadeInUp（来自animate.css）与导航栏固定顶部一起使用？

Question

FadeInUp seems to disable the navbar-fixed-top as whenever i use both of them my navbar scrolls away with the page and when i remove fadeInUp everything work's fine. I have used fadeInUp propert from animate.css in my MainApp.jsx. I want to use both of them, so is there any way to fix the problem.

MainApp.jsx

import React from "react"
import { render } from "react-dom"
import Headline from "./components/Headline"
import Footer from "./components/Footer"

class MainApp extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            load : false,
        }
    }

    componentDidMount(){
        this.setState({
            load : true,
        })
    }

    render(){
            return(
                <div className="animated fadeInUp">
                    <Headline>Heres the main page</Headline>
                    <Footer></Footer>
                </div>
            )
    }
}

render(<MainApp/>, document.getElementById('MainApp'))

Headline.jsx

import React from "react"
import styles from "./css/navbarItems.css"


export default class Headline extends React.Component {

    handleSelect(selectedKey) {
      alert('selected ' + selectedKey);
    }

    render() {
    return (
        <div>
            <div>
                <nav className="navbar navbar-inverse navbar-default navbar-fixed-top">
                  <div className="container-fluid">
                    <div className="navbar-header">
                      <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>                        
                      </button>
                      <a className="navbar-brand" href="#">WebSiteName</a>
                    </div>
                    <div className="collapse navbar-collapse" id="myNavbar">
                      <ul className="nav navbar-nav">
                        <li className="active"><a href="#">Home</a></li>
                        <li className="dropdown">
                          <a className="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span className="caret"></span></a>
                          <ul className="dropdown-menu">
                            <li><a href="#">Page 1-1</a></li>
                            <li><a href="#">Page 1-2</a></li>
                            <li><a href="#">Page 1-3</a></li>
                          </ul>
                        </li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                      </ul>
                      <ul className="nav navbar-nav navbar-right">
                        <li><a href="#"><span className="glyphicon glyphicon-user"></span> Sign Up</a></li>
                        <li><a href="#"><span className="glyphicon glyphicon-log-in"></span> Login</a></li>
                      </ul>
                    </div>
                  </div>
                </nav>
            </div>
        </div>
    )
  }
}

Answer 1

you're trying to add both position fixed for navigation while relative or absolute at the time of animation that's why it's not working. to animate something in react you can refer this doc guide to use animation in react

Or you can run some jQuery in componentDidMount and add nav-fixed class after your animations finised.

Still I will suggest first approach

Answer 2

The issue might be fixable with body { overflow-x: hidden; } body { overflow-x: hidden; } because animate.css affects floating stuff eg menus or other elements with position: fixed; . Give it a try.