Оглавление и положение читателя

Оглавление становится полезным, когда человек хочет перейти к определённой части урока или вернуться к знакомой операции. Оно не должно повторять всю страницу мелкими ссылками и не должно перекрывать текст во время чтения. Его задача — показать структуру материала и обеспечить понятный переход к разделам.

В этом уроке вы уточните расположение оглавления reading-lab, поведение на широком экране и вид страницы после перехода по якорю. Используем обычные ссылки на уже существующие build, addresses и comparison. Поиск, генерация оглавления и наблюдение за прокруткой через JavaScript остаются за пределами этой задачи.

Структура ссылок и точные названия

Полный HTML уже содержит три пункта, соответствующие заголовкам второго уровня. Это правильная отправная точка: оглавление показывает основные области, а внутренний «Разбор выбора» не создаёт четвёртую самостоятельную главу. Если перечислить каждый мелкий подзаголовок, боковая область может стать длиннее первого экрана и начнёт конкурировать с объяснением.

Названия ссылок должны позволять узнать раздел. Можно немного сократить длинный заголовок, если смысл остаётся точным, но обозначение «Пункт 1» или «Подробнее» не помогает ориентироваться. В нашем примере названия совпадают с основными заголовками. Читатель получает одну систему обозначений в оглавлении и в тексте.

Идентификатор якоря относится к устойчивости ссылки. Его не следует менять каждый раз, когда редактор уточняет видимый заголовок. Например, comparison может сохраниться после изменения «Сравнение решений» на «Сравнение способов подготовки страницы». При сохранении смысла прежняя внутренняя ссылка продолжит работать без новой карты переходов.

Оглавление также не является индикатором усвоения. Сам факт перехода к последнему разделу не означает, что человек прочитал начало. Поэтому не добавляйте подпись «Урок пройден» на основе положения страницы. Положение — навигационное наблюдение, а учебный результат требует другой задачи и собственного основания.

Оглавление до длинного чтения

В исходном HTML боковая область следует после статьи. Теперь переместите целиком существующий aside.lab-aside внутри lab-layout перед article.lab-article. Его содержимое не меняется. Это единственная структурная правка урока; не создавайте вторую копию оглавления.

На узком экране читатель встретит компактное оглавление до длинного текста. На широком оно окажется справа от статьи благодаря именованным областям сетки. Эта разница должна оставаться осмысленной: документы и ссылки сохраняют естественный порядок, а две соседние колонки представляют один материал. Не используем перемещение одного и того же элемента между далёкими частями страницы.

Создайте полный файл lesson-10.css:

.reading-lab .lab-layout { grid-template-areas: "aside" "article"; }
.reading-lab .lab-article { grid-area: article; }
.reading-lab .lab-aside { grid-area: aside; }
.reading-lab .lab-toc ol { margin-block-end: 0; }
.reading-lab .lab-toc li + li { margin-block-start: .5rem; }
.reading-lab .lab-prose section { scroll-margin-top: 1.5rem; }
.reading-lab .lab-prose section:target > h2 { text-decoration: underline; text-decoration-color: var(--lab-link); text-underline-offset: .25em; }
@media (min-width: 64rem) {
  .reading-lab .lab-layout { grid-template-areas: "article aside"; }
  .reading-lab .lab-toc { position: sticky; top: 1.5rem; }
  .reading-lab .lab-aside { align-self: stretch; }
}

Ожидается, что на широком экране оглавление некоторое время остаётся рядом с читаемым содержанием, не выходя из своей области. position: sticky работает относительно прокрутки и ограничений содержащего блока; ближайший предок с соответствующим переполнением может изменить его поведение. Механизм описан в MDN. Само слово sticky не гарантирует закрепление в любой вложенной структуре.

Переход к разделу

После открытия ссылки #comparison браузер переходит к целевому элементу. scroll-margin-top задаёт дополнительное пространство при соответствующем размещении цели прокрутки. В нашем незакреплённом хедере достаточно небольшого поля, чтобы заголовок не оказался прижатым к краю. Назначение свойства приведено в MDN.

Если позже общий хедер станет закреплённым, значение нужно будет согласовать с его реальной высотой. Не записывайте произвольный большой запас на все случаи. В разных состояниях шапка может переносить пункты и занимать другое место. Хорошая проверка состоит в переходе к нескольким разделам при выбранном масштабе, а не в доверии одному числу.

Псевдокласс :target относится к элементу, соответствующему фрагменту адреса. Его механизм описан в MDN. В нашем примере подчёркивание показывает раздел, выбранный ссылкой. Оно не меняется автоматически при обычной ручной прокрутке и не обозначает текущую видимую главу после любого перемещения.

Это ограничение нужно сохранить в объяснении. Указатель текущего раздела с наблюдением за прокруткой является дополнительной функцией. Если она действительно нужна, потребуется отдельная логика и проверка состояний. Для короткого оглавления обычные ссылки уже дают полезный результат без такого усложнения.

Откройте в будущем не только переход из оглавления, но и прямой адрес с фрагментом. Человек может получить ссылку на конкретный раздел от коллеги или сохранить её в закладке. В таком сценарии он не видел начало страницы, поэтому заголовок целевой области и соседний текст должны помогать восстановить контекст. Один подсвеченный прямоугольник без понятного названия не решает задачу.

Изменение оглавления также требует согласования с содержанием. Если два раздела объединены, старый якорь можно оставить возле новой соответствующей области, когда он продолжает обозначать тот же смысл. Не перенаправляйте его молча на случайный раздел ради отсутствия ошибки перехода. Постоянство ссылки полезно только вместе с точностью назначения. В нашем стенде идентификаторы сохраняются, поэтому этот риск не возникает при обычной смене размеров и расстояний.

Когда закрепление мешает

Представьте оглавление из двадцати длинных пунктов. Его высота может превысить окно, и закреплённая верхняя часть не поможет добраться до нижней. Не исправляйте это уменьшением текста до крошечного размера. Сначала сократите уровень детализации: оглавление статьи должно показывать основные ориентиры, а список всей серии находится на странице курса.

Можно также отказаться от закрепления для особенно длинной структуры. Это допустимый вариант компонента. Закреплённая область полезна только тогда, когда сохраняет доступ к своим ссылкам и не перетягивает внимание. В нашем стенде три пункта делают пример ограниченным и понятным, но не являются доказательством работы на любом содержимом.

Узкий экран получает обычную, незакреплённую область до статьи. Она не должна оставаться поверх текста и занимать половину окна после каждого движения. Если нужен свернутый вариант, естественный элемент details может стать отдельным расширением. Его поведение необходимо объяснить и согласовать с управлением; декоративная стрелка без действия не заменяет раскрытие.

Проверьте также заголовок статьи: оглавление не должно выглядеть крупнее него или сообщать более важный результат. У боковой области небольшой заголовок, спокойная поверхность и короткие ссылки. Такая форма помогает найти структуру и быстро вернуться к чтению.

После этого урока у читателя есть ясный путь к разделам и видимый результат якорного перехода. Система не притворяется измерителем прогресса. В следующем уроке уточним информационную шапку: какие сведения помогают выбрать материал и как показывать их без выдуманных дат и рейтингов.