How to use positon : sticky in CSS to create awesome sticky header and flexible sticky elements without Javascript

How to use positon : sticky in CSS to create awesome sticky header and flexible sticky elements without Javascript

5th January 2019 0 By Azadeh

Creating sticky elements on the page and specifically sticky header has always been a Javascript thing. We used to create a class with position: fixed and assign it to the sticky element based on user’s scroll.

Position: sticky the new solution

Using position: sticky in CSS we create an sticky element which sticks the element to its container  once user scrolls. Although depend on the scroll direction we should give the element one of the top, bottom, left or right properties for the sticky value to work. According to MDN:

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block. 

Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. 

sticky positioning in CSS

Here is a simple example:

#one { position: sticky; top: 10px; }

Sticky titles with position: sticky

We will have a look at a great demo from MDN. Basically in this example each section title will stick on the top once we scroll down its container:

See the Pen Sticky positioning by Šime Vidas (@simevidas) on CodePen.

Firstly the dt tag which holds the title have this important CSS:

dt {
position: -webkit-sticky; //safari support
position: sticky;
top: -1px;
}

Sticky value for position property makes it behave as a relative positioned before scrolling. Also it has a top property which is needed as we scroll down. Once we scroll down the behaviour of the element will change to fixed positioning and the title sticks on the top.

Secondly, once we pass that section and start the new section, the position for the dt tag behaves like a relative position again. Because as we learnt an element with position: sticky; property will stick to its own container. More like a local fixed element after scrolling. Therefore after we scroll and pass its container we cannot see it stuck anymore.

Flexible sticky elements

This is absolutely great. Practically it is very flexible and useful as we can manage how we want the element to stick on the DOM. This link is another example which creates a sticky header with sticky positioning..

The header has a sticky positioning and a top property. Very simple and neat without any Javascript.

Sticky value has a 86% support globally in browsers as per caiuse so far which is great.

With CSS evolving very fast we can now use native CSS properties such as position; sticky to do behavioural CSS related jobs. This is exciting and challenging at the same time. We should make sure to take the best decision based on the login and situation.

Thank you for reading