# CSS Tip: Use position:sticky in Your Lists ## Метаданные - **Канал:** CSS Weekly - **YouTube:** https://www.youtube.com/watch?v=JgkEBv-reUQ - **Дата:** 08.05.2026 - **Длительность:** 2:55 - **Просмотры:** 514 ## Описание A quick CSS tip explaining why you should set the headings in your ordered and unordered (ol & ul) lists to "position: sticky" to improve the usability of your websites. 👨‍💼 My blog: https://zoranjambor.com 💌 CSS Weekly Newsletter: https://css-weekly.com/ Help support my channel 💖 Watch ad-free videos on Patreon: https://www.patreon.com/cssweekly 🪧 Buy CSS Stickers pack: https://stickers.css-weekly.com ☕️ Buy Me a Coffee: https://buymeacoffee.com/cssweekly 📖 Chapters 00:00 Why you should use position:sticky with your lists 00:14 Demo setup and usability problem with lists 00:49 How to add position: sticky to list headlines 01:47 Why you should add background to sticky headlines 02:07 How to use position:sticky in ul and ol lists Keep up-to-date with CSS Weekly: 🦋 Bluesky: https://bsky.app/profile/cssweekly.com/ 🐦 Twitter: https://twitter.com/@cssweekly 🎶 TikTok: https://tiktok.com/@cssweekly 🎇 Instagram: https://instagram.com/cssweekly 📘 Facebook: https://www.facebook.com/CSSWeekly/ Keep up to date with what I'm up to: 👨‍💼 Blog: https://zoranjambor.com 💼 LinkedIn: https://www.linkedin.com/in/zoranjambor/ - Zoran Jambor #css #csstricks ## Содержание ### [0:00](https://www.youtube.com/watch?v=JgkEBv-reUQ) Why you should use position:sticky with your lists Are you using “position: sticky” with  all of your ordered and unordered lists,   or at least with most of them?   Well, you should be. Here's why. Using “position: sticky” on your lists can  be a major usability improvement. Let me show   you exactly how. On the example of my personal  website, I will go to the Writing page. Here, ### [0:14](https://www.youtube.com/watch?v=JgkEBv-reUQ&t=14s) Demo setup and usability problem with lists I have a massive list that contains  more than 463 articles. And just a note:   this is going to be useful even if  you have a smaller list than this one.    I structured the content I published here  by Years. So first we have 2026 with 10   articles and 5 videos. Then we have 2025 with  2 articles and 33 videos. And then we have… I   kind of lost track if I'm dealing with 2024  or 2025, or maybe I'm already at 2023… Well,   this is exactly where “position: sticky”  comes in. What I can do here to improve ### [0:49](https://www.youtube.com/watch?v=JgkEBv-reUQ&t=49s) How to add position: sticky to list headlines the usability of this massive list is to make  those headlines, years in this example, sticky. Let me scroll to the top of  the page, open Developer Tools,   and let's target the first headline here, 2026.   I will enable “position: sticky”. Of course,   you already know that when you're using  “position: sticky”, you also need to set   the “top” value. This is going to be the  anchor point at which the element will be   frozen. I will just enable the value I have  here. As my blog is on WordPress, I actually   want to adjust the “top” position according  to the WordPress admin bar. If it's present,   then I want the top value to be equal to that, or  in the case, zero. I'm not logged into WordPress,   and this is probably confusing, so I'm just  going to set it to zero, so it's clearer. And now, as I'm scrolling the page, the headline  2026 will freeze until I reach another one, 2025,   so it's perfectly clear which year I'm looking  at. Now, one thing that I want to note here is ### [1:47](https://www.youtube.com/watch?v=JgkEBv-reUQ&t=107s) Why you should add background to sticky headlines that when you do something like this, you  will probably want to set the background to   the headline element as well. Because if you  don't, you're going to end up in a situation   that looks like this. The text will overflow,  and it will be completely unreadable. So,   whenever you're setting “position: sticky”, make  sure that the sticky element has a background. ### [2:07](https://www.youtube.com/watch?v=JgkEBv-reUQ&t=127s) How to use position:sticky in ul and ol lists Essentially, this is all you need to do to  make your lists more usable. Set the “position:   sticky” to the headline of your list, and then  just add a “top” value, which will be zero in   most cases, and you also probably want to  set “padding” to that element because you   don't want to stick it exactly to the top of the  page. I wanted to share this tip because I often   find websites that don't use “position: sticky”  on larger lists, and I often get confused which   section I'm actually looking at, which section  I'm actually browsing. So if you want to make   your lists more usable, set “position:  sticky” to the headlines of those lists. Thank you so much for your attention.   My name is Zoran Jambor. I will see and   hear you in another sticky, usable  list. Or rather, in the next video. --- *Источник: https://ekstraktznaniy.ru/video/51679*