Next.js导航栏滚动至顶部时无法悬浮于页面内容上层

• 移动端展开式导航菜单错误使用了sticky定位：sticky定位的元素不会脱离标准文档流，自身会占据对应的页面布局空间，菜单展开时高度增加，自然会把下方的所有页面组件向下挤压。
• 异常仅在scrollTop=0时触发的逻辑：页面处于顶部未滚动状态时，sticky元素完全处于正常文档流位置，布局占位效果完全生效；页面向下滚动后，浏览器对sticky元素的层叠渲染优先级临时提升，视觉上看起来覆盖在内容上层，但元素本身仍占据文档流空间，该表现属于渲染特性导致的偶发现象，并非符合预期的悬浮效果。
• 菜单的层级设置错误：现有菜单设置z-10，低于顶部导航栏的z-20，无法保证悬浮在所有组件最上层。

不需要改动现有动画逻辑，仅调整定位和层级即可：

• 将移动端菜单容器的类名从sticky top-12 z-10替换为fixed top-[56px] left-0 right-0 z-50
  • fixed定位会让菜单完全脱离标准文档流，展开、收起的动画过程都不会占用页面布局空间，从根源解决内容被挤压的问题
  • top-[56px]匹配移动端顶部导航栏的实际高度（现有导航在移动端设置py-2，算上内边距总高度约56px，菜单会刚好贴合在导航栏下沿，无错位缝隙）
  • left-0 right-0让菜单宽度铺满整个视口，和顶部导航的通栏样式保持一致
  • z-50设置足够高的层级，保证菜单始终悬浮在所有页面组件之上
• 可选优化：删除代码中未实际使用的useState、usePresent导入，减少无效打包体积。

<AnimatePresence>
  {isOpen && (
    <motion.div
      variants={sidebarVariants}
      initial={{ y: '-100vh' }}
      animate={isOpen ? 'open' : 'closed'}
      exit={{ opacity: '0%', y: '-100vh' }}
      transition={{ duration: 0.5, delay: 0 }}
      className='fixed top-[56px] left-0 right-0 z-50 flex justify-center py-9 bg-white/60 dark:bg-black/60 backdrop-blur shadow-2xl dark:shadow-white/5'
    >
      <ul className='flex flex-col text-center'>
        <Link href='/'>
          <a>
            <li
              onClick={liToggle}
              className='px-3 py-2 rounded-3xl hover:bg-black hover:text-white w-[200px] dark:hover:bg-white dark:hover:text-black hover:animate-pulse'
            >
              Home
            </li>
          </a>
        </Link>
        <Link href='/'>
          <a>
            <li
              onClick={liToggle}
              className='px-3 py-2 rounded-3xl hover:bg-black hover:text-white w-[200px] dark:hover:bg-white dark:hover:text-black hover:animate-pulse'
            >
              About
            </li>
          </a>
        </Link>
        <Link href='/abnext'>
          <a>
            <li
              onClick={liToggle}
              className='px-3 py-2 rounded-3xl hover:bg-black hover:text-white w-[200px] dark:hover:bg-white dark:hover:text-black hover:animate-pulse'
            >
              Blogs
            </li>
          </a>
        </Link>
        <Link href='/abnext'>
          <a>
            <li
              onClick={liToggle}
              className='px-3 py-2 rounded-3xl hover:bg-black hover:text-white w-[200px] dark:hover:bg-white dark:hover:text-black hover:animate-pulse'
            >
              Contact
            </li>
          </a>
        </Link>
      </ul>
    </motion.div>
  )}
</AnimatePresence>

如果后续调整了移动端顶部导航栏的高度，同步修改top-[56px]的偏移值即可保证样式对齐。

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