reactjs - 如何用 Next js 听屏幕位置？

Question

我尝试听页面的滚动来对我的导航栏进行操作，我 想做的是：如果窗口是滚动的，请将 opaciy 0.5 设置为导航。我的意思是 -> 如果标题 y !==0 所以导航的不透明度为 0.5。

我知道在普通的 js 中，我可以执行类似 window.scroll(y-coord) 的操作来获得每次滚动时的实际位置。但是我如何用 Next js 实现它？（我缩短了代码以便更好地理解。

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

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

我试过类似的东西：

    useEffect(() => {
    window.addEventListener("scroll", window.scrollY);
     }, []);

但没有工作...

标签： reactjsnext.js

Answer 1

我检查了一切正常，您需要记住取消订阅事件。同时查看控制台是否有错误。

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);
  },[])