Sticking elements, when the user scrolls to a certain point, has become a common pattern in modern web design. You’ll see it applied to top navigation, the sidebar, share links, or perhaps advertisements; retaining visibility within the viewport as the user scrolls. Historically we’ve needed JavaScript to do this. However, sticky behaviour has been proposed (and drafted) as a new standard (the sticky position), allowing us to achieve the effect with pure CSS. Let’s take a look at how it works! Sticky Position sticky is a new value for the position property, added as part of CSS3 Layout Module Spec . It acts similarly to relative positioning, in that it doesn’t remove anything from the document flow. In other words, a sticky element has no effect on the position of adjacent elements and doesn't collapse its parent element. Given the following example, we set the #sidebar position to sticky along with top: 10px . The top value is required and specifies the distance from the top edge of the viewport where the element will stick . #sidebar { position: -webkit-sticky; // required for Safari position: sticky; top: 0; // required as well
↧