css sticky position not work even with top-0 #1805

ghost · 2020-05-21T07:30:46Z

ghost
May 21, 2020

I working with Tailwind CSS. I have two sticky positions one sticky header another sticky sidebar. my sticky header works fine.:


<body>
    <!-- haeder -->
    <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 header -->

(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)

estevanmaito · 2020-05-21T15:01:49Z

estevanmaito
May 21, 2020

Could you create an example using https://codepen.io/pen/

That way we can see it better and test the code 😁

1 reply

ghost May 21, 2020

thank you add a live page

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

css sticky position not work even with top-0 #1805

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

css sticky position not work even with top-0 #1805

ghost May 21, 2020

Replies: 1 comment · 1 reply

estevanmaito May 21, 2020

ghost May 21, 2020

ghost
May 21, 2020

Replies: 1 comment 1 reply

estevanmaito
May 21, 2020