Sticky Positioning with Nothing but CSS (Thanks to CSS Position: Sticky)

Sticky Positioning with Nothing but CSS (Thanks to CSS Position: Sticky)


Sticking elements when the user scrolls to a certain point is a common pattern in modern web design. You’ll see it applied to top navigation, the sidebar, share links, or perhaps ad blocks; retaining visibility within the viewport as the user scrolls. 

Historically we’ve needed JavaScript to do this. However, sticky behaviour has become a new standard (CSS position: sticky), allowing us to achieve the effect with pure CSS. Let’s take a look at how it works!

Sticky Position

sticky is a new(ish) 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

Now, as we scroll the page, when the sidebar’s distance from the top of the viewport reaches 0, the sidebar should stick, effectively giving us a fixed position. In other words, the sticky is kind of a hybrid between relative and fixed position.

Nesting

Additionally, CSS position: sticky will work within a scrolling box or an overflowing element. This time we’ll set the top to 15px to give some more space above the sidebar when it’s stickily positioned (yes, that’s a word).

The sidebar will remain sticky all along the parent’s height (ie: when the bottom of the parent reaches the bottom of the sidebar, it will “push” it off the page once more.)

Easy, isn’t it?

Support

In the last couple of years browser support for CSS position: sticky has taken huge leaps. From the chart you’ll see it enjoys excellent coverage, although many supporting browsers (such as Chrome and Edge, both of which use the Blink rendering engine) still struggle when CSS sticky is applied to <thead> or <tr> elements.

Additionally, as mentioned earlier, Safari offers full support but requires use of the -webkit- prefix.

Browser support for CSS position sticky
Browser support for CSS position: sticky

Using the Polyfill

To help out our non-supporting browsers (not that there are many nowadays) we can use stickyfill developed by Oleg Korsunsky. The polyfill works nicely in various circumstances. Whether the designated element has padding, margins, borders, been floated, or formed with relative units like em and percentage, the polyfill will accurately mimic the CSS sticky position behavior. And using stickyfill is equally intuitive.

To begin, grab stickyfill.js (optionally with jQuery, if you are more familiar with and prefer using jQuery for selecting elements). Link these libraries within your HTML document. Then initiate stickyfill with the designated element, as follows:

If you are using jQuery, you could write the following instead:

Now, our sticky sidebar should work across browsers including Chrome and Opera. The polyfill is smart enough that it will only run in non-supporting browsers, otherwise it will be completely disabled, stepping aside for the browser’s native implementation.

Caveats

There are a couple of other things to note before you take the plunge and use sticky position on your websites:

  • First, the height of the parent container should be greater than the sticky element.
  • The polyfill has its own shortcomings, in that it won’t work within an overflowed box.
  • At the time of writing, there is no specific JavaScript event handler for sticky to identify when the element is stuck. Such an event could be useful, for example, to add additional classes when the element is stickified (that might not be a word). There is however a slightly hacky way to achieve this using the Intersection Observer API. Read this post to find out more.

Closing Thoughts

CSS sticky position is a brilliant tool if you simply need a plain sticky element. If your need grows beyond that though—say you want to add some fancy effects upon the sticky element—you’ll still be better off opting for a JavaScript solution, be that self-written, or a library like Waypoints.js with its sticky module.

Further References

Learn CSS: The Complete Guide

We’ve built a complete guide to help you learn CSS, whether you’re just getting started with the basics or you want to explore more advanced CSS.



Source link

https://avasta.ch

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*