Next.js移动端导航栏初始透明Bug修复咨询

问题复盘 #

你遇到的这个问题挺典型的：大屏设备要求导航栏在滚动超100px后从黑转透明，移动端则始终保持黑色，但部署后移动端初始加载时导航栏是透明的，切换页面后才恢复正常黑色。

问题根源分析 #

出现这个Bug的核心原因是React组件首次渲染时，窗口宽度的获取存在时序问题。页面刚加载时，window.innerWidth可能还没准确识别出移动端的尺寸，导致window.innerWidth < 1200的判断为false；再加上初始状态navBackground是false，导航栏就被错误设置为透明了。而切换页面后组件重新渲染，窗口宽度已经正确读取，判断逻辑生效，导航栏才显示黑色。

另外，直接在JSX的style属性里用三元表达式判断样式，完全依赖渲染时的window.innerWidth值，很容易受页面加载时序的影响。

修复方案 #

你已经通过媒体查询加!important的方式解决了问题，这确实是个靠谱的方案，我再补充两种优化思路，帮你彻底规避这类问题：

方案1：优化React逻辑，精准监听窗口状态 #

我们可以单独维护一个isMobile状态，同时监听窗口尺寸变化，确保初始化和窗口 resize 时都能准确判断设备类型：

import React, { useState, useRef, useEffect } from "react";
import window from "global";
import Link from "./Link";

export default function NavComponent(props) {
  const [navBackground, setNavBackground] = useState(false);
  // 初始化时直接判断设备类型
  const [isMobile, setIsMobile] = useState(window.innerWidth < 1200);
  const navRef = useRef();
  navRef.current = navBackground;

  useEffect(() => {
    // 滚动监听逻辑
    const handleScroll = () => {
      const show = window.scrollY > 100;
      if (navRef.current !== show) {
        setNavBackground(show);
      }
    };

    // 窗口尺寸变化监听，实时更新设备状态
    const handleResize = () => {
      setIsMobile(window.innerWidth < 1200);
    };

    // 添加监听事件
    document.addEventListener("scroll", handleScroll);
    window.addEventListener("resize", handleResize);

    // 初始化时主动执行一次滚动判断，确保状态正确
    handleScroll();

    // 组件卸载时清理监听
    return () => {
      document.removeEventListener("scroll", handleScroll);
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return (
    <div>
      <Navbar 
        dark 
        expand="xl" 
        fixed="top" 
        className={styles.nav} 
        style={{
          backgroundColor: `${isMobile || navBackground ? "black" : "transparent"}`,
          transition: ".2s ease",
        }} 
      >
        {/* 导航栏内容 */}
      </Navbar>
    </div>
  );
}

方案2：你的CSS媒体查询方案（更稳定） #

通过CSS媒体查询直接强制移动端导航栏为黑色，用!important覆盖内联样式，这种方式完全不受JS执行时序影响，是最稳定的解决办法：

/* 在你的样式文件中添加 */
@media (max-width: 1199px) {
  .nav {
    background-color: black !important;
  }
}

为什么你的方案有效？ #

CSS媒体查询是浏览器原生支持的特性，页面加载时会立刻识别设备尺寸并应用对应样式，完全绕开了JS初始化时的时序问题。加上!important的优先级覆盖，确保不管JS逻辑如何，移动端导航栏都会保持黑色。

内容的提问来源于stack exchange，提问作者atman_lens