在滚动上添加className？

Question

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

如果代码不是问题，我认为它源于应用程序周围的perspective包装器，可能会禁止滚动注册。如何添加事件监听器以在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

您的代码存在问题，onScroll附加了一个侦听器函数handleScroll，而在您的情况下函数为handleHeaderStuck。更改侦听器以执行正确的功能。

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

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

Answer 2

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

main {
  height: 2000px;
}

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