移动端响应式Navbar滚动时无法固定顶部问题求助

你的Navbar滚动时无法固定在顶部，核心原因是没有给它添加固定定位的样式。基于你使用的Tailwind CSS，只需给<nav>标签补充几个类就能解决问题：

修改后的代码如下：

return (
  <nav className="bg-violet-900 fixed top-0 w-full z-50">
    <div>
      <div className="flex justify-between py-12 px-5"> 
        <h1 className="text-6xl text-white">AS</h1>
        <div className="text-white text-2xl lg:hidden">
          <i onClick={click} className={navbar===false ? "fas fa-bars" :"fas fa-times"}></i>
        </div>
      </div>
      
      <div>
        <ul className={navbar===true ?"bg-violet-900 text-right text-white z-10 flex flex-col" :"hidden"}>  
          <Link className="px-8 py-3" to='/'> Home</Link>
          <Link className="px-8 py-3"to='/projects'>Projects</Link>
          <Link className="px-8 py-3"to='/about'>Resume</Link>
          <Link className="px-8 py-3"to='/about'>About</Link>
        </ul> 
      </div>
    </div>
  </nav>
)

关键修改说明： #

• fixed top-0：让Navbar固定在屏幕顶部，滚动时不会随页面内容移动
• w-full：确保Navbar宽度占满整个屏幕，避免两侧出现留白
• z-50：设置足够高的层级，防止页面其他内容滚动时覆盖Navbar

额外注意：Navbar固定后会遮挡页面顶部内容，建议给页面主容器（比如<main>标签）添加pt-[6rem]（数值可根据你Navbar的实际高度调整），让内容避开Navbar区域。

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