CSS Tip: Use position:sticky in Your Lists

2:55

CSS Tip: Use position:sticky in Your Lists

CSS Weekly 08.05.2026 514 просмотров 50 лайков

Machine-readable: Markdown · JSON API · Site index

Смотреть на YouTube

Поделиться Telegram VK Бот

Транскрипт Скачать .md

Анализ с AI

Описание видео

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

Оглавление (5 сегментов)

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,

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

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

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.

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.

Другие видео автора — CSS Weekly

Ctrl+V

Экстракт Знаний в Telegram

Экстракты и дистилляты из лучших YouTube-каналов — сразу после публикации.

Подписаться

Лучшие методички за неделю — каждый понедельник