Make an element stick to top and bottom!

It is possible to make an element stick to the top and bottom of a scroll container! You could say: “Of course!”, but I guess I was just surprised it actually works.

Here’s the CSS:

.i-am-sticky {
	position: sticky;
	top: 0; /* or any other value if you want some offset */
	bottom: 0; /* or any other value if you want some offset */
}

I find this especially useful for a List/Detail two-column layout where items in the right column shows details when item in the left column is selected (think Apple Mail etc).

This way the selected item always stays visible to the user.

(Imagine trying to solve this using JS, urgh.)

Demo:

Here’s a quick demo:

https://codesandbox.io/embed/sticky-top-and-bottom-5s9ti