我正在尝试在 Tailwind CSS
中创建一个固定的导航栏,并使主页面滚动时保持粘性,但无论我尝试什么,都无法让它正常工作...
这是我已经实现的内容:
这是我的代码:
<!-- 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>