Author: Stasyuk Eugene 218 Tags: 17.12.2022

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?

I feel sticky

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?

position sticky

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: sticky property 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: 15px property.
  • Make sure that the parents of the element do not have overflow: hidden, auto, scroll properties

For the most part, this is more than enough to get things working as they should.

Back to Home

Other articles

Anchor links and fixed header

Anchor links and fixed header

Anchor links and fixed header

Recently, I haven’t seen any websites that have a static header for a long time. Almost all of them fix it at the top of the window. At least it’s very convenient to have the site navigation at your fingertips. But there is one thing that can cause discomfort with this approach: anchor links. Usually, […]

Wp Favs – plugin manager for WordPress

Wp Favs – plugin manager for WordPress

Wp Favs – plugin manager for WordPress

When you create WordPress templates on a regular basis, you come across one procedure that takes up some of your time – downloading and activating plugins. The WP Favs plugin solves this problem quite successfully. You simply create a list of plugins that you use regularly and then bulk upload them to your site. The […]