Практика: закрепляемые подписи разделов в длинном списке
В длинном списке закреплённое название группы помогает понять, к какому разделу относятся видимые пункты. Упражнение показывает sticky внутри отдельных секций, а не неподвижный заголовок всей страницы.
Назначение
В длинном списке закреплённое название группы помогает понять, к какому разделу относятся видимые пункты. Упражнение показывает sticky внутри отдельных секций, а не неподвижный заголовок всей страницы.
Как это работает
Внешняя область ограничена по высоте и прокручивается. Заголовок каждой секции получает position:sticky и top:0. Непрозрачный фон не даёт строкам просвечивать сквозь подпись.
Пример
<style>.group-scroll{max-height:15rem;overflow:auto;border:1px solid #9bb7a5}.group-scroll h3{position:sticky;top:0;margin:0;background:#dceee2;padding:.7rem}.group-scroll li{padding:.7rem}</style>
<div class="group-scroll" tabindex="0" role="region" aria-label="Учебные разделы"><section><h3>HTML</h3><ul><li>Структура</li><li>Ссылки</li><li>Изображения</li><li>Формы</li></ul></section><section><h3>CSS</h3><ul><li>Каскад</li><li>Отступы</li><li>Сетка</li><li>Адаптивность</li></ul></section></div>Что должно получиться
При прокрутке подпись удерживается у верхнего края своей области, пока её секция не заканчивается. Затем следующая группа становится текущей. Заголовки остаются обычной частью структуры документа.
Граница применения и частая ошибка
Высокий закреплённый заголовок может перекрывать слишком много содержимого. Проверьте фокусируемые ссылки, если замените ими пункты: они не должны скрываться под подписью. Не добавляйте вложенную прокрутку в обычную статью без необходимости.
Самостоятельная проверка
Увеличьте шрифт и длину заголовка. Прокрутите область клавиатурой, затем удалите ограничение высоты и сравните ближайший прокручиваемый контейнер. Для рабочего списка проверьте переход к каждому интерактивному пункту.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.