使用反应滚动时如何更改永久项目的css

Question

我如何在使用 react 时更改 div 的滚动高度？？？

<div id="navigation"></div>

css:

#navigation{
  background: #fff;
  position: fixed;
  width:100%;
  height:60px;
  text-align: center;
  direction: rtl;
}

Answer 1

您可以使用带有事件侦听器的纯 Javascript。根据滚动的距离更改状态并切换类。这是一个例子：

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      hasScrolled: false,
    };
    this.handleScroll = this.handleScroll.bind(this);
  }

  handleScroll() {
    let hasScrolled = true;

    // Check if it was scrolled back to the top.
    if (document.body.scrollTop <= 20) {
      hasScrolled = false;
    }

    this.setState({ hasScrolled });
  }

  componentDidMount() {
    // Listen on scrolling event, call our function.
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    // Unlisten if the component unmounts.
    window.removeEventListener('scroll', this.handleScroll);
  }

  render() {
    // Add className to the navigation based on our state.
    return (
      <div>
        <div
          id="navigation"
          className={this.state.hasScrolled ? 'onscroll' : null}
        />

        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
          takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

#navigation {
  background: red;
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  text-align: center;
  direction: rtl;
  transition: .2s ease height;
}

#navigation.onscroll {
  height: 30px;
}

p {
  margin: 80px 20px;
  font-size: 34px;
  font-family: system-ui, sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>