javascript - 在滚动上添加类名？

Question

如何在页面滚动时添加className？我已经准备好了许多其他文章和答案(可能是重复的)，但没有一个可以帮助我理解下面的代码有什么问题。

如果代码不是问题，我相信它源于应用程序周围的透视包装器，该包装器可能不允许滚动注册。如何添加事件监听器以在 id=container

上注册滚动

constructor(props) {
  super(props)
  this.state = {
      isStuck: true,
  }
this.handleHeaderStuck = this.handleHeaderStuck.bind(this)
}

componentDidMount () {
  window.addEventListener('scroll', this.handleHeaderStuck);
}

componentWillUnmount () {
  window.removeEventListener('scroll', this.handleHeaderStuck);
}

handleHeaderStuck() {
  if (window.scrollY === 0 && this.state.isStuck === true) {
      this.setState({isStuck: false});
  }
  else if (window.scrollY !== 0 && this.state.isStuck !== true) {
      this.setState({isStuck: true});
  }
}

render() {

  return (
    <main className={this.state.isStuck ? 'header-stuck' : ''}>
       ...
    </main>

这个屏幕截图让我确信问题出在 onScroll 监听器的注册上

Answer 1

确保您的组件有足够的高度用于滚动。你的代码有效。向 main 添加一些高度并检查它。

main {
  height: 2000px;
}

https://jsfiddle.net/69z2wepo/156204/