Reactjs 如何使用Next js收听屏幕位置？

我试着听页面的滚动，在导航栏上进行操作， 我想做的事情：如果窗口是滚动的，请将不透明0.5设置为导航。 我的意思是->如果标题是y==因此，导航的不透明度为0.5

我知道，在普通js中，我可以执行类似window.scroll（y-coord）的操作，以获得每次滚动时的实际位置。但是我如何用nextjs实现它呢？ （为了更好地理解，我设置了代码的快捷方式

//////////////////style///////////
  const NavHeader = styled.header`
  background-color: transparent;
  height: 60px;
  opacity:1;`;

        <NavHeader>
            <MainNav>
        <p>something to render inside the Navbar
            </MainNav>
        </NavHeader>

---

但是没有用…

我检查了所有的功能，你需要记住取消订阅活动。同时查看控制台中是否有任何错误

import Head from 'next/head'
import {useEffect} from 'react'; // don't forget

---

。

import Head from 'next/head'
import {useEffect} from 'react'; // don't forget

  useEffect(()=>{
    const scroll = (event) => {
      console.log(window.scrollY)
    }
    window.addEventListener("scroll", scroll, false);
    return  () => window.removeEventListener("scroll", scroll, false);
  },[])