Sticky elements are used all across the web. With the appearance of the
The task is to build a sticky header that appears when the user scrolls past the static header or on a custom offset position. When scrolling down, the static header should stay at its place, while the sticky header should roll down. When scrolling up, the sticky header should disappear, and the static header should roll down. Note that the content of the static header and the sticky header differs.
To make it easier to understand the specifications, see this pen that contains the full solution:
For a better understanding of how this code works, we should examine the HTML structure.
Here’s the simplified preview of the HTML structure:
main element, we have
article elements. To make
position: sticky work, the sticky element should be inside the scrollable element — the
main element in our case.
Header holds two elements:
.header--alpha, the static header, and
.header--beta, the sticky header.
First, let’s style our wrapper element. It should have position relative by default, and sticky once the offset is reached.
top: 0 would make sure our header is stuck to the top, and the property
overflow: hidden hides everything outside of the
Next, we should define the behavior of the header parts.
.header--alpha, our static header is visible by default. When the user scrolls past the offset, and the wrapper
header element becomes sticky, it will be translated outside of the wrapper element instantaneously without any transition effect. Note that element will be transitioned when it goes to the original position when sticky effect won’t be active.
.header--beta, our sticky header is positioned absolutely and translated outside of the wrapper
header element. When the sticky effect is activated, it will be translated and transitioned in the original position.
You might have noticed the
This element serves as an offset for the scroll. When it reaches the top of the viewport, the header becomes sticky. And when the header becomes sticky, the fake element will be pushed up by the height of the header plus one extra pixel. When the user scrolls up and reaches the fake element in its new position, the sticky effect will be turned off.
const $realSticky = document.querySelector("header");
In this example, lodash debounce function is used to execute the task on scroll event.
I am aware the I could write better JS code and avoid adding the
.fake-header element, but I wanted to create a demo without too many calculations.
Since the static header determines the height of the wrapper element, we have a problem with selecting or clicking on the content immediately after the sticky header, once it appears.
We could use pointer-events to fix this issue:
First we would set
none to the
header element to disable click/hover events, and then we would set the
all to reenable them again.
You could see the full demo on my Codepen.
I am really excited to see how fast CSS is moving. Brand new properties, like
position: sticky and
pointer-events allows us to create better experience for the end user more easily and natively. And support is getting better and better every day. 🏆