Dunce Caps for Cats Dot Com

Continuing with neat CSS properties that also align with my naming scheme, I’d like to discuss position: sticky. Recently I worked on a layout for a site where I wanted to have a menu bar that would move with the page upon scroll and remain fixed once it hits the top. One can do this with JavaScript, but sticky takes care of it in just a couple of lines.

#menu {
  position: sticky;
  top: 0;
}

The element is treated as relatively positioned until it reaches a specific threshold—here when the menu hits the very top of the container—at which point its position becomes fixed. Safari requires position: -webkit-sticky and support for Edge is in development.