调整标题大小 onscroll React

我基本上需要在 React 中重写这个 codepen。https://codepen.io/lili2311/pen/dJjuL https://codepen.io/lili2311/pen/dJjuL

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);

一个简单的实现将包括

1. 将滚动事件监听器添加到 componentDidmount 中，
2. 将类更改为类名，
3. 将 html 添加到 render()
4. 包括CSS

我已经为你创建了相同的Codesandbox.io https://codesandbox.io/s/lrz0595p07