Javascript 使用链接后，Next.js粘性导航栏问题不会继续存在

使用next.js，我对我制作的粘性导航条有一个问题。总而言之，它在网站初始加载时工作正常，但是，当我使用导航栏上的链接并转到下一页时，导航栏将失败，除非我两次单击同一链接

问题的屏幕显示：

import React，{useState}来自“React”；
从“下一个/链接”导入链接；
导出默认功能布局（道具）{
异步函数myFunction（）{
var contentBoxV=
contentBox.getBoundingClientRect（）.top+
document.documentElement.scrollTop+
（content.getBoundingClientRect（）.top+
document.documentElement.scrollTop）*
0.25;
var窗偏移量=
content.getBoundingClientRect（）.top+document.documentElement.scrollTop；
console.log（contentBoxV）；
console.log（windowOffset）；
如果（contentBoxV>=windowOffset+15）{
navbar.classList.add（“粘性”）；
}否则{
navbar.classList.remove（“粘性”）；
}
}
如果（窗口类型！=“未定义”）{
var navbar=document.getElementById（“navbar”）；
var content=document.getElementById（“subNav”）；
var contentBox=document.getElementById（“contentH”）；
}
返回(
myFunction（）}
>
杰弗里·阿里加
文件夹
接触
{props.children}
杰弗里·阿里加

);
}

reactjs中通过

getElementById

访问dom节点不常见，请阅读reactjs中通过

getElementById

访问dom节点不常见的部分，请阅读

import React, { useState } from "react";
import Link from "next/link";

export default function Layout(props) {
  async function myFunction() {
    var contentBoxV =
      contentBox.getBoundingClientRect().top +
      document.documentElement.scrollTop +
      (content.getBoundingClientRect().top +
        document.documentElement.scrollTop) *
        0.25;

    var windowOffset =
      content.getBoundingClientRect().top + document.documentElement.scrollTop;

    console.log(contentBoxV);
    console.log(windowOffset);

    if (contentBoxV >= windowOffset + 15) {
      navbar.classList.add("sticky");
    } else {
      navbar.classList.remove("sticky");
    }
  }
  if (typeof window !== "undefined") {
    var navbar = document.getElementById("navbar");
    var content = document.getElementById("subNav");
    var contentBox = document.getElementById("contentH");
  }

  return (
    <>
      <div
        id="contentH"
        className="container-xl contentDocument"
        onScroll={() => myFunction()}
      >
        <div className="iceBorder"></div>
        <div className="frostBack"></div>
        <div id="paddingTop"></div>
        <div id="subNav"></div>

        <div id="navbar" className="container navMenu fixedIntro">
          <div className="row linkContainer">
            <Link href="/">
              <div className="col navLink">Jeffrey Arriaga</div>
            </Link>

            <a
              id="resumePDF"
              className="col navLink"
              href="/ArriagaJeffrey_Resume_noPhone_CS_Version.pdf"
              target="_blank"
            >
              Resume
              <img id="pdfMiniCon" src="/29587.png" alt="pdfFileImg" />
            </a>

            <div className="col navLink">Portfolio</div>
            <Link href="/contact">
              <div className="col navLink">Contact</div>
            </Link>
          </div>
        </div>

        {props.children}

        <footer>
          <p>Jeffrey Arriaga</p>
        </footer>
      </div>
    </>
  );
}