Блог

Привет пытался создать компонент, подобный [this] [1] в приложении NextJS, но он показывает ошибку ReferenceError: window is not defined

 //Navbar,js
import styles from "../styles/Navbar.module.css";
export default function Navbar() {
  window.onscroll = function () {
    scrollFunction();
  };
  function scrollFunction() {
    if (
      document.body.scrollTop > 20 ||
      document.documentElement.scrollTop > 20
    ) {
      document.getElementById("navbar").style.top = "0";
    } else {
      document.getElementById("navbar").style.top = "-50px";
    }
  }
  return (
    <div id="navbar">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Blog</a>
      <a href="#">Contact</a>
    </div>
  );
}
  

Кто-нибудь может помочь? Я только что запустил узел
[1]: https://www.w3schools.com/howto/howto_js_navbar_slide.asp

окно не определено в ssr. Поместите эту функцию в блок useEffect, useEffect не запускается во время ssr.

 useEffect(()=> {
 window.onscroll = function () {
    scrollFunction();
  };
  function scrollFunction() {
    if (
      document.body.scrollTop > 20 ||
      document.documentElement.scrollTop > 20
    ) {
      document.getElementById("navbar").style.top = "0";
    } else {
      document.getElementById("navbar").style.top = "-50px";
    }
  }
return ()=> {
 //remove the event listener
}
}, [])