Устранение смещения якорей из-за фиксированного блока, HTML+CSS
Опубликовано: 06.09.2018
Впервые я столкнулся с этим, когда делал на своем сайте выплывающую панель «Поделиться в соц сетях» при скролле поста вниз (попробуйте).
При использовании ссылок-якорей на сайте, после перехода по ссылке, панель соц сетей закрывала верхнюю часть контента (как правило заголовок) и в итоге пользователю просто было непонятно, куда он в итоге попал. Вы можете опробовать это сами, кликнув по ссылке «A» ниже.
А так как сейчас очень популярно делать фиксированные шапки и меню position:fixed, прилепленные к верхней части экрана, то думаю что этот пост будет интересен многим. В нём я рассмотрю несколько вариантов якорей с отступами от верхней границы экрана при переходе по ним.
Для более ясного понимания на все 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 ; /* собственно то, ради чего всё затевалось */ } |