[英]How to make scrollable sidebar fixed?
我遇到了 BetterDev 侧边栏,如果我们向其中添加内容,侧边栏也会滚动。 有没有办法使侧边栏固定且不可滚动? 我试过sticky,用top-0和left-0纠正,但没有用。
<div class="relative min-h-screen md:flex">
<!-- mobile menu bar -->
<div class="bg-gray-800 text-gray-100 flex justify-between md:hidden">
<!-- logo -->
<a href="#" class="block p-4 text-white font-bold">Better Dev</a>
<!-- mobile menu button -->
<button class="mobile-menu-button p-4 focus:outline-none focus:bg-gray-700">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<!-- sidebar -->
<div class="sidebar bg-blue-800 text-blue-100 w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out">
<!-- logo -->
<a href="#" class="text-white flex items-center space-x-2 px-4">
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
</svg>
<span class="text-2xl font-extrabold">Better Dev</span>
</a>
<!-- nav -->
<nav>
<a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
Home
</a>
<a href="" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
About
</a>
<a href="" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
Features
</a>
<a href="" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
Pricing
</a>
</nav>
</div>
<!-- content -->
<div class="flex-1 p-10 text-2xl font-bold">
content goes here
</div>
</div>
position:固定; 左:0px;
例如: https://www.w3schools.com/howto/howto_css_fixed_menu.asp
在顶部显示一个导航栏,但如您所见:
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
您需要更改的只是从上到左,如果它不起作用,它可能是机身 position 类型。 但在那我不能帮助你萌芽。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.