Javascript 在卷轴上添加类名？

当页面滚动时，如何添加

className

？我已经准备了许多其他文章和答案（可能是重复的），但没有一篇帮助我理解下面代码的错误

如果代码不是问题所在，我相信它源自应用程序周围的

透视图

包装，可能不允许注册scroll。如何添加事件侦听器以在

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>

构造函数（道具）{
超级（道具）
此.state={
是的，
}
this.handleHeaderStuck=this.handleHeaderStuck.bind（this）
}
组件安装（）{
window.addEventListener（'scroll'，this.handleHeaderStick）；
}
组件将卸载（）{
window.removeEventListener（'scroll'，this.handleHeaderStick）；
}
手持式{
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（）{
返回(
...

---

此屏幕截图向我保证，问题在于onScroll listener的注册

您的代码有问题，

onScroll

附加了一个listener函数

handleScroll

，而在您的情况下，该函数是

HandleHeaderStick

。请更改侦听器以执行正确的函数

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

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

---

您的代码有问题，

onScroll

附加了一个侦听器函数

handleScroll

，而在您的情况下，该函数是

handleheaderstack

。请更改侦听器以执行正确的函数

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

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

---

确保你的组件有足够的高度进行滚动。你的代码可以正常工作。 给干管增加一些高度并检查它

main {
  height: 2000px;
}

---

确保您的组件有足够的高度进行滚动。您的代码可以正常工作。 给干管增加一些高度并检查它

main {
  height: 2000px;
}

---

哇-谢谢。在添加问题时，这更多的是复制粘贴问题。我的应用程序正在按照你的建议运行，而不是问题。我将更改我的问题。干杯。@Darren，你的意思是问题仍然存在还是解决了问题仍然存在。在向我的问题添加代码时，我从一个旧文件复制并粘贴了代码。Th电子应用程序与建议不兼容。哇-谢谢。添加到问题时，这更多的是复制粘贴问题。我的应用程序正在按照您的建议运行，而不是问题。我将更改我的问题。干杯。@Darren，您的意思是问题仍然存在还是解决了问题仍然存在。在将代码添加到我的问题时，我会复制d并从旧文件粘贴。该应用程序无法使用该建议。在构造函数中，初始化

isStuck:false

。当第一次开始滚动时将其设置为

true

时，所有条件都不会为

true

，因此状态永远不会更新。在构造函数中，初始化

isStuck:false

。当当你第一次开始滚动时，它被设置为

true

，没有一个条件是

true

，因此状态永远不会更新。谢谢你，安德鲁。我想了很多，也计算了很多-不幸的是，设置高度也是不可能的。我想这是由于与在屏幕外菜单的容器中有关的几个因素。我不是试图找到一种方法将滚动设置为某个

div id=“container”

，您知道吗？是的，只需简单地记录滚动位置

const scrollpos=window.scrollY

console.log（scrollpos）

在我的应用程序中，我总是得到

0

。在你的jsFiddle中，你总是得到注册的职位。我想我需要打开另一个关于scrollY的问题。谢谢你的帮助。以防万一你感兴趣-我刚刚发现的问题是由于

溢出：隐藏；

被应用到

主体上。这是故意的只适用于情态动词，但我搞砸了。再次感谢。哦，真的发生了）我很高兴能帮助您找到这个问题。谢谢您，安德鲁。我也这么想和计算了——不幸的是，设置高度也是不可能的。我认为这是由于与屏幕外菜单容器相关的几个因素。我正在试图找到一种方法，将滚动设置为某个
div id=“container”
，你知道吗？是的，只需简单地记录滚动位置
const scrollpos=window.scrollY
console.log（scrollpos）
在我的应用程序中，我总是得到
0
。在你的jsFiddle中，你总是得到注册的职位。我想我需要打开另一个关于scrollY的问题。谢谢你的帮助。以防万一你感兴趣-我刚刚发现的问题是由于
溢出：隐藏；
被应用到
主体上。这是故意的只适用于情态动词，但我搞砸了。再次感谢。哦，它发生了）我很高兴能帮助你找到这个问题。