Reactjs 和 tailwindcss 使 NavBar 粘滞不起作用答案

【问题标题】：Reactjs and tailwindcss make NavBar sticky does not workReactjs 和 tailwindcss 使 NavBar 粘滞不起作用
【发布时间】：2023-01-24 15:37:20
【问题描述】：

我正在尝试使用 Tailwindcss 使我的导航栏粘在我的浏览器之上。我知道应该将 sticky 属性添加到根组件的第一个子组件上，这就是我将其添加到 App.jsx 文件的原因。

请参阅下面的代码：

const App = () => (
  <div className="bg-primary w-full overflow-hidden ">
    
    <header className="sticky top-0 z-50 sm:px-16 px-6 flex justify-center items-center">
      <div className="xl:max-w-[1280px] w-full">
        <Navbar />
      </div>
    </header>

    <div className="bg-primary flex justify-center items-start">
      <div className="xl:max-w-[1280px] w-full">
        <Hero />
      </div>
    </div>
    
    <div className="bg-primary sm:px-16 px-6 flex justify-center items-center">
      <div className="xl:max-w-[1280px] w-full">
        <Block1/>
        <Block2 />
        <Block3 />
        <Footer />
      </div>
    </div>
  </div>
);

然而，一旦我向下滚动，导航栏仍然会移出可见的浏览器空间。我尝试了 fixed 属性，但在这种情况下，导航栏不再居中和对齐。

我怎样才能让这个导航栏保持在顶部？

【问题讨论】：

标签： reactjs tailwind-css

【解决方案1】：

您可以尝试一些方法让您的导航栏在浏览器顶部保持粘性：

确保包含导航栏的元素具有“相对”或“绝对”的位置。这将允许导航栏相对于父元素定位，并使其固定在浏览器的顶部。

<header className="sticky top-0 z-50 sm:px-16 px-6 flex justify-center items-center relative">

将“top”属性添加到导航栏以将其定位在父元素的顶部。

<header className="sticky top-0 z-50 sm:px-16 px-6 flex justify-center items-center relative top-0">

使用媒体查询使导航栏仅在特定屏幕尺寸上固定。

<header className="sm:sticky top-0 z-50 sm:px-16 px-6 flex justify-center items-center relative">

确保导航栏的父元素具有比页面上其他元素更高的 z-index，以确保它位于顶部。

<header className="sticky top-0 z-50 sm:px-16 px-6 flex justify-center items-center relative z-50">

最后，尝试使用 position: fixed;而不是保持导航栏固定在屏幕顶部的粘性。

<header className="top-0 z-50 sm:px-16 px-6 flex justify-center items-center fixed">

确保测试这些更改并根据需要进行调整以适合您的特定布局和设计。

【讨论】：