CSS position sticky does not work

If your position sticky does not work here is a list of things you can check!

Setting up position sticky is pretty easy, all you need is to set position:sticky and top values for your element:

                    <div id="sticky-wrapper">
  <div style="position:sticky; top:10px;"> <!-- will be sticked 10px from top -->
    <div>sticky data</div>
  </div>
</div>
                  

... but sometimes it just does not work here is list of possible reasons

PARENT ELEMENT HAS NO HEIGHT

If parent element has no height defined, sticky element will not work because it will not know where to stick it self. To fix this issue, just set the height on parent element:

                    div id="sticky-wrapper" style="height:100%;">
  <div style="position:sticky; top:10px;"> <!-- will be sticked 10px from top -->
    <div>sticky data</div>
  </div>
</div>
                  

PARENT ELEMENT HAS OVERFLOW SET

Most common reason for sticky position not working is overflow settings on parent element. If your sticky parent element has any of these, sticky will not work:

                    overflow: hidden;
overflow: scroll;
overflow: auto;
                  

Sometimes it is not easy to check does any of the parent has overflow element set, to find out you can use this small JS snippet. Just execute it in your browser developer console and it will show you which of the parent element has any overflow values set:

                    let parentSticky = document.querySelector('.sticky').parentElement;

function searchParent(parentEl){
   const hasOverflow = getComputedStyle(parentEl).overflow;
    if (hasOverflow !== 'visible') {
        console.log(hasOverflow, parentEl);
    }
  if(parentEl.parentElement != null){
    searchParent(parentEl.parentElement);
  }
}

searchParent(parentSticky);
                  

remove the overflow value from your sticky parent and it will work again!

GOOGLE ADS

If you want to use position sticky on your google ads element, and you are using  data-ad-format="auto" setting, in that case google ads snippet will automatically add style="height: auto !important;"  to all parent elements which will mess up your sticky element position. Because parent height is not defined, in this case sticky does not know where to "hook" it self. Therefore be sure that parent element has defined height

Google ads automatically attach style="height: auto !important;"

To fix this issue, we have to add width: 100%; max-width: 100%; for ins parent element, and position: absolute; width: inherit; max-width: inherit; for ins element it self:

                    <div style="position: relative; width: 100%; max-width: 100%;">
    <ins class="adsbygoogle"
         style="display:block; position: absolute; width: inherit; max-width: inherit;"
         data-ad-client="ca-pub-123456789"
         data-ad-slot="123456789"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>
                  

more about this issue you can read here: https://stackoverflow.com/questions/55695667/adsense-injecting-style-tag-into-my-page-in-chrome

BROWSER SUPPORT

It could be that your browser is just not supporting this feature, here you can check it:
https://caniuse.com/css-sticky