CSS Tip

The Sticky Header that Sticks!

Creating a sticky header is an easy task with position: sticky. But what about a sticky header that sticks for real? By combining scroll-driven animation and shape(), we can achieve a nice effect with simple code.

A CSS-only sticky header

header {
  position: sticky;
  top: 0;
  animation: stick linear both;
  animation-timeline: scroll();
  animation-range: 0px 45px;
}
@keyframes stick {
  0% {
    padding-block: 30px 30px; /* 30 + 30 = 60 */
    clip-path: shape(/* code from generator */);
  }
  to {
    padding-block: 5px 55px; /* 5 + 55 = 60 */
    clip-path: shape(/* code from generator */);
  }
}

See the Pen A Sticky Header that Stick! by Temani Afif (@t_afif) on CodePen.

The shapes are generated using my wavy divider generator. Choose the bottom side, then fix the shape ID and the granularity. The first shape is the one with a size equal to 0 (rectangle), and the second shape will have a size different from 0. Having the same granularity (the same number of points) will allow the browser to transition smoothly between the two shapes.

Overview of the wavy divider generator

More CSS Tips