search

mgrubinger / blog

https://www.grooovinger.com/
MIT License
0 stars 0 forks source link

Make an element stick to top and bottom! #6

Open mgrubinger opened 2 years ago

mgrubinger commented 2 years ago

date: '2020-08-12T08:00:00Z' published: true short: Useful CSS to make an element stick to the top and bottom of a scroll container! tags:

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