I've been experimenting with Tailwind CSS and trying to implement two sticky elements - a sticky header and a sticky sidebar. My sticky header seems to be working perfectly:
<body>
<header class="sticky z-50 top-0 hidden">
<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>
</header>
However, when I try to implement the second sticky element (as shown in the code snippet above), namely the sticky sidebar, it doesn't seem to work properly even when the header is hidden. Additionally, removing the
overflow-y-scroll lg:overflow-y-hidden<div class="relative h-auto w-auto">
<div class="grid grid-cols-12">
<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>
<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">
...
</div>
<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">
...
</div>
</div>
I'm still troubleshooting why the sticky sidebar isn't functioning as expected. For reference, you can view the live page at: https://codepen.io/djary/pen/QWjYOGX
The "register" and "login" items should remain in a container with a sticky position.