在 nextjs 中更改页面滚动上的标题背景颜色答案

【问题标题】：Change header background color on page scroll in nextjs在 nextjs 中更改页面滚动上的标题背景颜色
【发布时间】：2021-04-15 09:10:42
【问题描述】：

在下面的代码中

import { useEffect } from "react";
import Link from "next/link";
import styles from "./header.module.css";
import { useRouter } from "next/router";

export default function Header() {
  const router = useRouter();

  const handleClick = (path) => {
    if (path === "/mvg") {
      console.log("I clicked on the mvg Page");
    }
  };

  useEffect(() => {
    const header = document.querySelector("header");
    const nav = document.querySelector("nav");
    if (router.pathname === "/") {
      header.classList.add("headerTest");
      nav.classList.add("menuTest");
    }
  }, []);

  useEffect(() => {
    const header = document.querySelector("header");
    const nav = document.querySelector("nav");
    function checkScroll() {
      if (window.innerWidth <= 768) {
        header.classList.remove("headerTest");
        nav.classList.remove("menuTest");
      }
      if (window.scrollY === 0) {
        header.classList.add("headerTest");
        nav.classList.add("menuTest");
      }
    }
    window.addEventListener("scroll", checkScroll);
    // Remove event listener on cleanup
    return () => window.removeEventListener("resize", checkScroll);
  }, []); // Empty array ensures that effect is only run on mount

  return (
    <header className={styles.header}>
      <h1>
        <Link href="/">
          <a>
            <span className="offscreen">Home</span>
          </a>
        </Link>
      </h1>
      <nav id="menu" className={styles.menu}>
        <ul>
          <li>
            <Link href="/mvg">
              <a onClick={() => handleClick("/mvg")}>MVG</a>
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}

当用户到达主页时，我希望标题背景为蓝色，菜单项文本为白色

if (router.pathname === "/") {
  header.classList.add("headerTest");
  nav.classList.add("menuTest");
}

然后当用户在主页上向下滚动时，我希望标题为白色，菜单项文本恢复为默认值。但是当用户滚动回顶部时，我希望标题为蓝色，其菜单项文本再次为白色，这是我通过 checkScroll 函数实现的。

我的问题是，当用户单击 mvg 页面链接时，我希望标题为白色，其菜单项文本为 mvg 页面到达时的默认颜色，当 mvg 页面向下滚动时，当mvg 页面滚动到顶部。

当前代码未能满足最后一个条件，因此每当 mvg 页面滚动到顶部时，mvg 页面标题为蓝色，其菜单项文本为白色，来自同一 checkScroll 函数。

如何修改我的代码，以便当用户滚动到顶部时 mvg 页面标题为蓝色，其菜单项文本为默认颜色，同时我的主页标题仍为白色，其菜单项文本为白色滚动到顶部？

我的codesandbox

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

以下解决问题

import { useState, useEffect } from "react";
import Link from "next/link";
import styles from "./header.module.css";
import { useRouter } from "next/router";

export default function Header() {
  const [test, setTest] = useState(false); // Defaults to `false`
  const router = useRouter();

  useEffect(() => {
    const header = document.querySelector("header");
    const nav = document.querySelector("nav");
    if (router.pathname === "/") {
      setTest(true);
      header.classList.add("headerTest");
      nav.classList.add("menuTest");
    }
  }, []);

  useEffect(() => {
    const header = document.querySelector("header");
    const nav = document.querySelector("nav");
    function checkScroll() {
      if (window.innerWidth <= 768) {
        header.classList.remove("headerTest");
        nav.classList.remove("menuTest");
      }
      if (window.scrollY === 0) {
        header.classList.add("headerTest");
        nav.classList.add("menuTest");
      }
    }
    if (test) {
      window.addEventListener("scroll", checkScroll);
      // Remove event listener on cleanup
      return () => window.removeEventListener("resize", checkScroll);
    }
  }, [test]);

  return (
    <header className={styles.header}>
      <h1>
        <Link href="/">
          <a>
            <span className="offscreen">Home</span>
          </a>
        </Link>
      </h1>
      <nav id="menu" className={styles.menu}>
        <ul>
          <li>
            <Link href="/mvg">
              <a>MVG</a>
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}

【讨论】：