Javascript 尾风固定导航条

我正在尝试在

Tailwind CSS

和sticky scroll主页中创建一个

固定导航栏

，但无论我尝试了什么，我都无法让它工作

以下是我取得的成就：

这是我的密码：

<!-- NavBar -->
<header class="fixed bg-blue-600 shadow-md  z-50 w-full px-5 py-2 flex justify-between items-center">
    <router-link to="/" class="text-2xl text-white">My App</router-link>
    <div>
        <router-link to="/login" class="text-white hover:bg-gray-700 px-3 rounded py-1">Login</router-link>
        <router-link to="/register" class="text-white hover:bg-gray-700 px-3 rounded py-1">Register</router-link>
    </div>
</header>
<div class="flex">
    <!-- Sidebar -->
    <aside class="fixed bg-white h-screen py-5 shadow">
        <div class="flex flex-col text-left">
            <router-link to="/" class="hover:bg-gray-400 px-12 py-2 rounded">
                <i class="fa fa-dashboard"></i>
                <span class="">Dashboard</span>    
            </router-link>
        </div>
    </aside>
    <!-- Main Page -->
    <main class="bg-gray-200  flex-1">
        <transition name="slide-fade">
            <router-view></router-view>
        </transition>
    </main>
</div>

我的应用程序
登录
登记
仪表板

正如我在下面的代码中所给出的那样，您只需要给FlexBox留出一些上边距

看看样品

请查看以下代码：

<!-- NavBar -->
<header class="fixed bg-blue-600 shadow-md  z-50 w-full px-5 py-2 flex justify-between items-center">
    <router-link to="/" class="text-2xl text-white">My App</router-link>
    <div>
        <router-link to="/login" class="text-white hover:bg-gray-700 px-3 rounded py-1">Login</router-link>
        <router-link to="/register" class="text-white hover:bg-gray-700 px-3 rounded py-1">Register</router-link>
    </div>
</header>
<div class="flex mt-24 md:mt-16">
    <!-- Sidebar -->
    <aside class="fixed bg-white h-screen py-5 shadow">
        <div class="flex flex-col text-left">
            <router-link to="/" class="hover:bg-gray-400 px-12 py-2 rounded">
                <i class="fa fa-dashboard"></i>
                <span class="">Dashboard</span>    
            </router-link>
        </div>
    </aside>
    <!-- Main Page -->
    <main class="bg-gray-200  flex-1">
        <transition name="slide-fade">
            <router-view></router-view>
        </transition>
    </main>
</div>

我的应用程序
登录
登记
仪表板

以下是仅使用Flex box的解决方案

代码沙盒

带顺风的粘性页眉和页脚
带顺风的粘性页眉和页脚
什么是Lorem Ipsum？Lorem Ipsum只是印刷的虚拟文本
以及排版业。Lorem Ipsum已成为行业标准
从16世纪开始，一个不知名的印刷商在厨房里印刷文字
然后把它拼凑成一本样本书。它幸存了下来
不仅是五个世纪，而且是电子排版的飞跃，
1914年由H.Rackham翻译。
Tailwind很棒在Tailwind导航栏中尝试Flex


如果有人仍在寻找，这里是使用rights tailwind类的解决方案

我的布局如下所示：

<div>
   <header class="sticky top-0 z-50"></header>
   <main class=relative></main>
   <footer></footer>
</div>


为了让其他人更好地帮助你，你能详细说明一下你的行为吗。@巴特我更新了我的问题，请看一看……你到底是什么意思？标题/导航栏（蓝色）应固定在顶部，并且在滚动时不会更改？所以侧边栏+主页应该只滚动？很好！想想flex…box=）这就是我要找的。谢谢@MauroThis工作得很好这救了我一天。