Menu
I working with Tailwind CSS. I have two sticky positions one sticky header another sticky sidebar. my sticky header works fine.:
<body>
<!-- haed -->
<header class="sticky z-50 top-0 hidden">
<!-- searchbar -->
<div class="grid grid-cols-12 p-1 sm:py-3 md:px-16 md:py-12 xl:px-32 xl:pt-24 bg-gray-100">
<div class="col-span-12 mb-2 lg:col-span-3 ">
<span id="btnMenu" onclick="toggleButton(); return false">
<i class="fal fa-2x fa-bars hover:bg-white"></i>
</span>
<span class="mx-2 float-left lg:float-none lg:mx-6">Logo</span>
</div>
<div class="col-span-12 lg:col-span-9">
<span class="w-full h-10 bg-gray-200 cursor-pointer border border-gray-300 text-sm rounded-full flex">
<input type="search" name="serch" placeholder="Search..."
class="flex-grow px-4 rounded-l-full rounded-r-full text-sm focus:outline-none"> <i
class="fas fa-search m-3 mr-5 text-lg text-gray-700 w-4 h-4"> </i> </span>
</div>
</div>
<!-- end searchbar -->
</header>
<!-- end head -->
(in the above code hidden class for a tested second sticky position alone) but the second sticky position not work! Continuing the above code
<div class="relative h-auto w-auto">
<!-- sidebar and mainpage -->
<div class="grid grid-cols-12">
<!-- sidebar -->
<div id="backgroundmenu"
class="hidden z-30 absolute top-0 right-0 h-full w-full bg-black opacity-25 top-0 lg:hidden"></div>
<!-- background mobile shadow -->
<div id="rightSidebar"
class="hidden z-30 absolute right-0 top-0 h-full w-full lg:static lg:block lg:right-auto lg:top-auto col-span-12 sm:col-span-12 md:col-span-4 lg:col-span-3 xl:col-span-2">
<!-- sidebar items -->
<div class="sticky top-0 bg-gray-100 font-light h-full w-1/3 lg:w-auto overflow-y-scroll lg:overflow-y-hidden">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo similique adipisci quam pariatur
explicabo, assumenda voluptatem saepe, accusamus nostrum optio, rem impedit aliquid.
Obcaecati quidem, aut inventore quae cupiditate ex?</p>
<a href="#" class="p-5 pr-10 block hover:bg-gray-200 hover:shadow-xs hover:rounded-full">
<i class="fal fa-sign-in"></i> Login</a>
<a href="#" class="p-5 pr-10 block hover:bg-gray-200 hover:shadow-xs hover:rounded-full">
<i class="fal fa-user-plus"></i> Register</a>
</div>
<!-- end sidebar items -->
</div>
<!-- end sidebar -->
<!-- main -->
...
sticky sidebar not working even header is hide and when remove overflow-y-scroll lg:overflow-y-hidden classes. and i don't know why
and live page: https://codepen.io/djary/pen/QWjYOGX
register and login items (container must be sticky position)
344
asked Aug 08 '26 14:08
Your rightSidebar component has a h-full class which makes it inherit the height of its parent. So it can never become sticky. Remove that to fix your issue.
117
answered Aug 10 '26 06:08
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With