Sticky Positioning for Dynamic Layouts

Sticky positioning combines aspects of both relative and fixed positioning. When an element is positioned sticky, it will behave like a relatively positioned element until it reaches a certain threshold on the page. At this point, it will switch to acting like a fixed element.

position: sticky;

Let's consider the following illustration. The element with the text content I am sticky has the sticky positioning.

When an element is inside a container, and the container remains within the viewport, the element will behave as if it were relatively positioned. However, when a portion of the parent container moves out of the viewport, the element becomes fixed in place as long as some part of the container remains on the screen. Once the entire container exits the viewport, relative positioning is reactivated, and the element will disappear from view along with the container.

Let's have some practice and create a couple of sections with sticky titles to them. So a user could always see the title of that section which he reads now, and then it is supposed to disappear on scroll.

Note

It's important to mention that we must specify the top or bottom property, so the browser can understand where we expect to stick an element.