Фиксированные заголовки и ссылки перехода? Решение в scroll-margin-top

Фиксированные заголовки и ссылки перехода? Решение в scroll-margin-top Сайтостроение

Фиксированные заголовки и ссылки перехода? Решение в scroll-margin-top

От создателя: Неувязка: вы нажимаете ссылку перехода, к примеру, <a href=»#header-3″>Jump</a> — это ссылка на что-то наподобие <h3 id=»header-3″>Header</h3>. Это совсем нормально, пока в высшей части странички не покажется заголовок с position: fixed;, скрывающий заголовок, на который вы пытаетесь перейти!

Фиксированные заголовки имеют неприятную привычку скрывать элемент, на который вы располагаете ссылку.

Фиксированные заголовки и ссылки перехода? Решение в scroll-margin-top

Ранее для решения данной для нас трудности использовались различные хаки. По сути, при разработке CSS-Tricks, я гласил: «Черт возьми, я просто буду задавать с припасом padding-top для заголовков в статье, поэтому что я все равно не возражаю против такового вида».

Но по сути на данный момент есть вправду обычный метод совладать с сиим в CSS – при помощи scroll-margin-top.

CSS

123h3 {  scroll-margin-top: 5rem; /* тут хоть какое число, которое даст для вас отступ от фиксированного заголовка */}

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

В том же духе работает и эта странноватая (но крутая) ссылка на «текстовые фрагменты», которую предоставил Chrome для перехода к середине странички.

Создатель: Chris Coyier

Редакция: Команда webformyself.

Источник

READ
Сontent-visibility и доступная семантика
Оценить статью
Блог о самом интересном.