页面滚动时如何添加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侦听器的注册上
最佳答案
确保组件的高度足以滚动。您的代码有效。
给main添加一些高度并检查它。
main {
height: 2000px;
}
https://jsfiddle.net/69z2wepo/156204/
关于javascript - 在滚动上添加className?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49555718/