Sticky headers
В этой демонстрации создадим липкую шапку для списка имён. Термин «липка шапка» не часто встретишь в обиходе, так как чаще всего используется термин «sticky header». Он означает, что шапка при прокрутке страницы или блока остаётся на месте. Это удобно, так как пользователь всегда видит важные элементы.
Для начала добавим основу разметки в HTML-файле:
.rolodex — нужен для позиционирования элементов;.list-section — блок-обёртка для одного списка имён;.sticky-header — блок с заголовком списка;<ul>, <li> — список и его элементы.
Добавим списки имён для букв «Б» и «В». Для остальных букв не будем добавлять списки, чтобы не загромождать страницу.
Работа с разметкой закончена. Перейдём к стилизации.
Для главного блока .rolodex укажем размеры. Максимальный размер высоты указан, чтобы появилась прокрутка, а размер ширины, чтобы центрировать блок. Остальные стили имеют чисто декоративный характер.
С помощью свойств overflow: обрежем блок по максимальной высоте и добавим полосу прокрутки.
Зададим стили для списка. Удалим стандартные браузерные отступы у <ul> и удалим булеты. У <li> добавим подчёркивание снизу с помощью border.
Осталось стилизовать заголовок и сделать его липким.
Для начала стилизуем: зададим текстовые параметры, градиентный фон и внутренние отступы.
На этом стилизация декоративной части закончилась. Займёмся стики-хедером.
Укажем position: sticky. Это свойство нужно для того, чтобы элемент при прокрутке блока оставался на месте. Покрутите контент внутри блока и посмотрите результат. Кау видите ничего не изменилось.
Для прилипания не достаточно указать position: sticky. Также нужно указать top: 0, чтобы элемент прилипал к верхней границе блока.
Проверьте теперь результат. Прокрутите блок.
Добавим z-index: 1, чтобы элемент .sticky-header точно был над списком имён.
На этом демонстрация завершена.
