滚动时添加className：如何为id=container绑定滚动事件监听？

看起来你找对方向啦！如果你的页面滚动是发生在#container这个内部容器里（而不是整个window），那绑定在window上的滚动事件肯定不会触发——这时候直接把监听器挂到这个容器上就好。结合你提供的类组件代码，我给你整理了具体的实现方案：

1. 给容器添加React Ref #

首先在组件的构造函数里创建一个ref，用来获取#container的DOM元素，这是React中操作DOM的推荐方式：

constructor(props) {
  super(props);
  this.state = {
    isStuck: true,
  };
  this.containerRef = React.createRef(); // 创建容器ref
  this.handleHeaderStuck = this.handleHeaderStuck.bind(this);
}

2. 挂载/卸载时绑定/移除滚动监听器 #

在组件挂载完成后，给容器添加scroll事件监听器；组件卸载时记得移除，避免内存泄漏：

componentDidMount() {
  const container = this.containerRef.current;
  if (container) {
    container.addEventListener('scroll', this.handleHeaderStuck);
  }
}

componentWillUnmount() {
  const container = this.containerRef.current;
  if (container) {
    container.removeEventListener('scroll', this.handleHeaderStuck);
  }
}

3. 完善滚动处理逻辑 #

修改handleHeaderStuck方法，通过容器的scrollTop值判断滚动状态，更新isStuck状态：

handleHeaderStuck() {
  const container = this.containerRef.current;
  if (container) {
    // 这里可以根据你的需求调整判断条件，比如scrollTop超过50时切换状态
    const newIsStuck = container.scrollTop <= 0;
    if (newIsStuck !== this.state.isStuck) {
      this.setState({ isStuck: newIsStuck });
    }
  }
}

4. 在render中关联ref和容器 #

最后把ref绑定到#container元素上，同时确保容器有滚动的条件（比如设置固定高度和overflow属性）：

render() {
  return (
    <div 
      id="container" 
      ref={this.containerRef} 
      style={{ 
        height: '100vh', // 给容器设置固定高度，确保内容超出时滚动
        overflow: 'auto' // 开启内部滚动
      }}
    >
      {/* 你的页面内容 */}
      <header className={this.state.isStuck ? 'your-stuck-class' : ''}>
        你的头部内容
      </header>
      {/* 足够长的内容，让容器可以滚动 */}
    </div>
  );
}

关键注意事项 #

• 一定要确保#container元素设置了固定高度/最大高度和overflow: auto或overflow: scroll，否则它不会成为滚动容器，scroll事件也不会触发。
• 如果你因为某些原因不想用Ref，也可以用document.getElementById('container')来获取元素，但Ref是React更推荐的方式，能避免直接操作DOM带来的潜在问题。

内容的提问来源于stack exchange，提问作者Darren