javascript - Next.js 粘性导航栏问题在使用 Link 后不会出现

Question

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

该问题的截屏视频： https ://drive.google.com/file/d/1AIYXrjGP9_lAsQ32bhDzWPtTLQt-czTm/view

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

标签： javascriptreactjsnext.js