Впервые я столкнулся с этим, когда делал на своем сайте выплывающую панель «Поделиться в соц сетях» при скролле поста вниз (попробуйте).
При использовании ссылок-якорей на сайте, после перехода по ссылке, панель соц сетей закрывала верхнюю часть контента (как правило заголовок) и в итоге пользователю просто было непонятно, куда он в итоге попал. Вы можете опробовать это сами, кликнув по ссылке «A» ниже.
А так как сейчас очень популярно делать фиксированные шапки и меню position:fixed, прилепленные к верхней части экрана, то думаю что этот пост будет интересен многим. В нём я рассмотрю несколько вариантов якорей с отступами от верхней границы экрана при переходе по ним.
- Стандартный якорь
- Отступ в виде псевдоэлемента
- Положительный padding и отрицательный margin
- Border и отрицательный margin
- Метод Г с возможностью добавления border-top
Для более ясного понимания на все h2-заголовки я добавил заливку.
A: Стандартный якорь
Пример того, как работает стандартная ссылка-якорь. Если вы попали сюда, кликнув по ссылке, а не просто проскроллили страницу, то скорее всего заголовок у вас оказался полностью скрыт под панелью соц сетей.
Возможно было бы правильнее назвать пост не «5 методов…», а «4 метода…». Потому что это и не метод вовсе, а показательный пример того, как быть не должно, ну да ладно.
Б: Отступ в виде псевдоэлемента
Используем псевдоэлемент для добавления отступа перед элементом — :before
или :after
.
Поддержка браузерами: Chrome конечно же, IE8+, Firefox 3+, Opera 9.25+, Safari 3+.
Замечания:
- Требуется поддержка браузером CSS псеводоэлементов.
- Метод не работает корректно, если у элемента есть фон или заливка (наезжает на контент).
- Не работает корректно, если у элемента есть свойства
padding-top
илиborder-top
.
#link-B:before { display: block; content: ""; height: 55px; margin: -55px 0 0; }
В: Положительный padding и отрицательный margin
Используем padding
для создания отступа и отрицательный margin
, чтобы этот же отступ убрать, а точнее — сделать его незаметным для пользователей.
Обратите внимание, что внутренные отступы padding
тоже попадают под заливку, то есть, если у вашего элемента будет фон, то он скорее всего наедет на контент перед ним. Для того, чтобы игнорировать padding
при добавлении фона на элемент, используйте CSS-свойство background-clip:content-box
.
Поддержка браузерами: Chrome конечно же, Firefox 4.0+, Opera 10.6+, Safari 3+.
Замечания:
- Необходима поддержка браузером
background-clip:content-box
, но это только в том случае, если вы хотите добавить фон элементу. - Некоторые ограничения при использовании
margin
(в том числе при margin-collapse — это когда из нижнего отступа первого элемента и верхнего отступа второго определяется наибольший, который и становится величиной отступа между этими элементами). - Невозможность использования
padding-top
.
#link-C { padding-top: 55px; margin-top: -55px; -webkit-background-clip: content-box; background-clip: content-box; }
Г: Border и отрицательный margin
По сути то же самое, что и предыдущий метод, но вместо padding
используем border
. Что это нам даёт?
- Теперь вы спокойно можете использовать внутренние отступы
padding
. - Постараюсь выразиться правильно — по идее
border
— это тот жеpadding
, но только с заливкой и эффектами. Поэтому при использовании фона или заливки элемента нам нужно учесть, чтобы она распростаранялась на сам элемент и наpadding
, но не наborder
(ведь он то у нас прозрачный), здесь поможетbackground-clip:padding-box
. - Ограничение в использовании
border-top
, которое однако легко решаемо — смотрите ниже.
Поддержка браузерами: Chrome конечно же, Firefox 1.0+, Opera 10.5+, Safari 3+.
#link-D { border-top: 55px solid transparent; margin-top: -55px; padding: 15px; /* паддинги - без проблем */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }
Д: Метод Г с возможностью добавления border-top
Дополнение к предыдущему методу, которое позволит добавить на элемент верхний border
. Поддержка браузерами псевдоэлементов и background-clip
(только при наличии фона или заливки) обязательна.
Поддержка браузерами: Chrome конечно же, Firefox 3.5+, Opera 10.5+, Safari 3+.
#link-E { position: relative; /* важно - для того, чтобы псевдоэлемент позиционировался относительно этого элемента */ border-top: 55px solid transparent; margin-top: -55px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #link-E:before { content: ""; position: absolute; top: -2px; /* равен по модулю толщине border */ left: 0; right: 0; border-top: 2px solid #ccc; /* собственно то, ради чего всё затевалось */ }