Position sticky doesn’t work – to my surprise this is a fairly common request that I myself have encountered in my time. Sticky is a pretty simple and versatile solution for placing sticky blocks on a page. At the very least, it doesn’t require you to do a decent amount of javascript code, which did work in some places. Now, this procedure can be done with just the use of a few css directives.
And yes, for the uninitiated – here’s how position sticky works: https://codepen.io/jecosjmecos/pen/oNOMBxz
Why isn’t position sticky working?
Let’s start by looking at a possible problem and then talk about how to use sticky. I have encountered this problem in my time. Perhaps it’s because one of the element’s parents has the overflow: hidden, auto, scroll property. In the example above, our sticky block has a parent with class .container, which has a parent <section>. So, if one of these parents has overflow property , the blue block will stop moving inside. Check 😁
How does it work?
In the example above, we can see two blocks: a red block on the left and a transparent block on the right (.blue-wrapper). There is a blue block inside the right block. The height of this small block is less than the height of its parent. So, with the help of our article hero, we can make the blue block move within its parent when the user will scroll the page. Perhaps, this is the whole principle of its use.
All we have to do is:
- Add the
position: stickyproperty to the blue block (element with class .blue) - Determine whether the block will stick to the top or the bottom. In my example, it’s on top, so add the
top: 15pxproperty. - Make sure that the parents of the element do not have
overflow: hidden, auto, scrollproperties
For the most part, this is more than enough to get things working as they should.
