Фиксированные заголовки и ссылки перехода? Решение в 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.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

Автор: Chris Coyier

Источник: //css-tricks.com

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: