页面滚动时如何添加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>


javascript - 在滚动上添加className?-LMLPHP

此屏幕截图使我确信问题出在onScroll侦听器的注册上

最佳答案

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

main {
  height: 2000px;
}


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

javascript - 在滚动上添加className?-LMLPHP

关于javascript - 在滚动上添加className?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49555718/

10-16 17:54
查看更多