Блог / CSS / 5 способів створення посилань-якорів з відступом зверху. Усунення зсуву через фіксованого блоку (шапка, меню).
Вперше я зіткнувся з цим, коли робив на своєму сайті випливають панель «Поділитися в соц мережах» при Скролл поста вниз (спробуйте).
При використанні посилань-якорів на сайті, після переходу за посиланням, панель соц мереж закривала верхню частину контенту (як правило заголовок) і в підсумку користувачеві просто було незрозуміло, куди він в результаті потрапив. Ви можете випробувати це самі, клікнувши на посилання «A» нижче.
А так як зараз дуже популярно робити фіксовані шапки і меню position: fixed. приліплені до верхньої частини екрану, то думаю що цей пост буде цікавий багатьом. У ньому я розгляну кілька варіантів якорів з відступами від верхньої межі екрану при переході по ним.
Для більш ясного розуміння на всі h2 -заголовкі я додав заливку.
A: Стандартний якір
Можливо було б правильніше назвати пост не «5 методів ...», а «4 методу ...». Тому що це і не метод зовсім, а показовий приклад того, як бути не повинно, ну да ладно.
Б: Відступ у вигляді псевдоелемента
Використовуємо псевдоелемент для додавання відступу перед елементом -: before або: after.
Підтримка браузерами: Chrome звичайно ж, IE8 +, Firefox 3+, Opera 9.25+, Safari 3+.
зауваження:
- Необхідна підтримка браузером CSS псеводоелементов.
- Метод не працює коректно, якщо у елемента є фон або заливка (наїжджає на контент).
- Чи не працює коректно, якщо у елемента є властивості padding-top або border-top.
В: Позитивний 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.
Г: Border і негативний margin
По суті те ж саме, що і попередній метод, але замість padding використовуємо border. Що це нам дає?
- Тепер ви спокійно можете використовувати внутрішні відступи padding.
- Постараюся висловитися правильно - по ідеї border - це той же padding. але тільки з заливкою і ефектами. Тому при використанні фону або заливки елемента нам потрібно врахувати, щоб вона распростаранялась на сам елемент і на padding. але не на border (адже він то у нас прозорий), тут допоможе background-clip: padding-box.
- Обмеження у використанні border-top. яке однак легко можна вирішити - дивіться нижче.
Підтримка браузерами: Chrome звичайно ж, Firefox 1.0+, Opera 10.5+, Safari 3+.
Д: Метод Г з можливістю додавання border-top
Доповнення до попереднього методу, яке дозволить додати на елемент верхній border. Підтримка браузерами псевдоелементів і background-clip (тільки при наявності фону або заливки) обов'язкове.
Підтримка браузерами: Chrome звичайно ж, Firefox 3.5+, Opera 10.5+, Safari 3+.