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

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>
    );
  }
}

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

工作演示