Question

我正在使用reactjs，需要根据滚动位置更改div的类名。一旦这个div到达页面顶部，我需要改变它的类。有关如何做到这一点的任何建议吗？

Answer 1

你将获得div的offsetTop位置，然后将它与scrollTop进行比较，如果它满足你的条件，你将设置一个状态，然后设置className。

示例代码：

class App extends React.Component {
  state = {
    style: null
  };

  handleScroll = e => {
    if (e.target.scrollTop >= this.bbox.offsetTop) {
      this.setState({
        className: "something",
        divStyle: { backgroundColor: "orange" }
      });
    }
  };
  render() {
    return (
      <div onScroll={this.handleScroll} style={styles}>
        <Ipsum />
        <Ipsum />
        <br />
        <div
          className={this.state.className}
          style={this.state.divStyle}
          ref={ref => (this.bbox = ref)}
        >
          HelloWorld
        </div>
        <br />
        <Ipsum />
        <Ipsum />
        <Ipsum />
        <Ipsum />
        <Ipsum />
      </div>
    );
  }
}

P.S。但是，与示例代码不同，您需要确保自己出于性能原因，不是每次都设置状态。

Working DEMO

如何根据滚动位置更改班级名称？

1 个答案: