Javascript 在Croll React上调整标题大小

我需要在react中重写这个代码笔。

---

好的，这是我的尝试。不确定它是否能正常工作，但它会让您大致了解如何在react中构建它

//创建导航栏组件
类导航栏扩展组件{
构造函数（）{
超级（）；
//在状态中，可以跟踪要添加到元素中的类
此.state={
类：“”//现在它是空的，或者您可以给它一个默认类。
}
}
//使用lifecycle方法触发getWindowHeight方法。
componentDidMount（）{
() => {
window.addEventListener（'scroll'，this.getWindowHeight）；
}
}
组件将卸载（）{
() => {
window.removeEventListener（'scroll'，this.getWindowHeight）；
}
}
//然后创建方法
getWindowHeight=（）{
常量距离=window.pageYOffset||
document.documentElement.scrollTop
const shrinkOn=“200px”；
//现在，在条件中，将状态更改为较小，因此如果条件为真，它将更改为较小，否则将更改为默认状态
如果（距离>收缩）{
这是我的国家({
类别：“较小”
})
}
}
render（）{
返回(
//现在在元素中，您可以将状态添加到类中，也可以将事件添加到onScroll中
)
}

一个简单的实现包括

将滚动事件侦听器添加到componentDidmount

将类更改为className

将html添加到render（）中

包括css

我已经为你创造了同样的机会

function resizeHeaderOnScroll() {
 const distanceY = window.pageYOffset || 
 document.documentElement.scrollTop,
 shrinkOn = 200,
 headerEl = document.getElementById('js-header');

if (distanceY > shrinkOn) {
   headerEl.classList.add("smaller");
   } else {
    headerEl.classList.remove("smaller");
   }
 }

window.addEventListener('scroll', resizeHeaderOnScroll);