Stick It
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.
Jul 7 2017