A note on CSS Position: Sticky and Wrappers

Lately I have been fiddling with CSS Sticky position. It's an amazing feature that kind of lets you have your own css sticking around some part of the code.It's a very nice feature that allows you to keep things floating around the screen as the user scrolls.

This type of behaviour is the basis for some very cool web effects. However, as you can imagine, it does bring some little flaws in. Specially when you are designing with Joomla or Wordpress, where sometimes you just want to add some class but can't properly touch the DOM elements. (Because they come from some other module you don't have access to, or can't or shouldn't touch at all).

Lets follow up with a small example of what the css trick does.

Another quick view at an example of how sticky works can be found here

The css code is very simple and easy to use. However, there are several things that we need to take into account. First of all, note that sticky will always stay sticky within it's parent container. In the previous example (you can inspect the html code if you wish) I gave the container a 500px height and then the paragraph will scroll around the container untill it ends. This means that the container is always flowing around the background, but the paragraph that has been styled as sticky  appears to float as the scroll moves down , in a sort of fixed position until it ends.

This reffers to the two parts that make up the sticky property in CSS. It is one thing the sticky element / item, which is the item that will stick around. The Sticky element will stick around the sticky container. The Sticky container is the container that will hold the item

This is fast an easy, however, what happens when it comes to making sticky elements within containers , wrappers and that kind of thing?  ¿What happens if we can only add a sticky class to a child container that is wrapped around a f****ing wrapper?  In order to build this blog I use Joomla and Balbooa Gridbox. Don't get me wrong, they are a fantastic team of Russian developers that makes Joomla development so much easier and enhancing.  However, in this builder, as well as in many Wordpress builders such as divi  or  elementor you'll find that many of these sticky attributes are much harder to fiddle with because of all the added wrapper elements that surround any custom HTML that you may want to make sticky.

Lets take a look at an example.

In the above example, we would want our  sticky text to move around the main container, however, since it's contained inside of another smaller wrapper container, the element itself will not be sticking around much.

My first workaround was to use a parent selector. We already have the child > selector to select .class > .childs  and they have been around for a while. So I thought ... well if we invert the operator the parent selector should exist equally that way we could select .wrapper < .sticky and then apply the sticky css property to the parent wrapper... easy right?

Nope... apparently as I discovered later on, parent selectors do not exist. I was almost outraged instantly... so I had to dig deep into finding a small explanation as to why something as trivial as this didn't work until I found this post first, and then this post explaining why. (TL;DR - Apparently, ​there are many performance issues on how the browser would render the html and css).  

So , what are the workarounds that we can use to deal with this? The first thing that crossed my mind is with javascript. Javascript does allow the parent selector

We could use simple javascripts that load select the parent (or the parent of the parent) with either jquery or native javascript. This is not as elegant as using simple CSS but it does get the trick done.

There is a pseudo-selector that has been created for this purpose in CSS too, named has(). something like .cointainer:has(sticky) would only get the containers or wrappers that contain an element with a sticky class inside of them. This would also be a great implementation, however, despite it has been specified, none of the browsers actually support this yet (to the date of the creation of this article. You can check this website if by the time of reading any browser has already implemented this class.)

If - like me - you are thinking on selecting the class with .container > .sticky , this will not be enough. We need to apply the sticky property to the container class, and not to the sticky class itself. The best workaround would always be to change the container class and add the sticky class to that container. However this is not always possible. This is a list of all of the possible selectors in CSS.

For the time being, we'll simply have to wait.