Как прикрепить блок к верху страницы css

Прилепленное позиционирование с помощью CSS

Прикреплять (или чаще всего говорят прилипить) элементы, когда пользователь использует скроллинг чтобы перемещаться по странице, стало распространённой практикой в веб дизайне. Чаще всего эту технику используют для верхних меню, боковых панелей, ссылок социальных сетей, и даже рекламных баннеров т.к. элементы всегда остаются в поле зрения пользователя.

Исторически сложилось так, что для создания эффекта нам нужен был JavaScript. Однако, "прилепленное" позиционирование было предложено в качестве нового стандарта в CSS, как альтернатива уже существующим типам. Что позволило воссоздавать этот эффект только при помощи CSS. Давайте посмотрим как это работает на практике!

"Прилепленное" позиционирование

sticky — это новое значение свойства position, что и означает "прилепленный". Оно было добавлено в новую спецификацию CSS3. Его работа схожа на относительное позиционирование т.к. он тоже ничего не убирает из потока. Другими словами, "прилепленный" элемент никак не влияет на позиционирование смежных элементов и не рушит родительский элемент.

В примере ниже, мы назначили боковой панели с идентификатором #sidebar "прилепленное" позиционирование, а также назначили расстояние до верхнего края родительского элемента 10 пикселей, используя свойство top: 10px. Значение top нам необходимо для того, чтобы назначит расстояние от верхнего края окна браузера.

Теперь, когда мы начнём двигаться вниз, используя скроллинг, в тот момент, когда расстояние от боковой панели до верхнего края окна браузера достигнет нуля, сайдбар прилипнет, сымитировав фиксированное позиционирование. Другими словами, "прилепленное" позиционирование является гибридом между относительным и фиксированным позиционированием.

Вложенность

Более того, "прилепленное" позиционирование будет работать также с отдельным блоком с прокруткой или переполненным элементом. В этот раз мы установим значение top в 15 пикселей для того чтобы дать сайдбару чуть больше пространства сверху, когда он прилеплен.

Сайдбар будет оставаться прилепленным на всей высоте родительского блока (т.е. когда дно родительского блока достигнет уровня дна сайдбара, он "оттолкнет" его)

Легко и просто, не так ли?

Кросс-браузерная поддержка

Если вы посмотрите эту демку в таких браузерах как Chrome, Opera, или Internet Explorer (и Blink), то вы увидите, что она не работает. Причина в том, что эти браузеры не поддерживают "прилепленное" позиционирование.

Поддержка "прилепленного" позиционирования браузерами

Переключившись на движок от Blink, команда разработчиков убрала из Chrome 28 поддержку "прилепленного" позиционирования. Более того, команда даже убрала возможность включать эту поддержку через chrome://flags. Они объяснили это так:

Текущая реализация "прилепленного" позиционирования некорректно взаимодействует с элементами композиции или скроллингом. Мы хотим вернуть "прилепленное" позиционирование со временем. А пока необходимо улучшить текущую реализацию скроллинга и общего взаимодействия компонентов. Как только у нас это получится, мы сможем заново вернуть поддержку "прилепленного" позиционирования. Такое решение позволит ему корректно взаимодействовать с другими элементами системы.

Существует альтернатива — вы можете использовать полифил для того чтобы сымитировать эффект в браузерах, которые его не поддерживают.

Использование полифила

Для того чтобы помочь браузерам, которые не поддерживают "прилепленное" позиционирование, мы будем использовать полифил, созданный Олегом Корсунским. Он называется — stickyfill. Эта библиотека работает прекрасно в совершенно разных ситуациях. В независимости от того имеет ли заданный компонент внутренние и внешние отступы, границы, выравнивание или может быть он сформирован при помощи относительных единиц как em или проценты, полифил аккуратно сымитирует "прилепленное" позиционирование. Использование stickyfill также достаточно интуитивно-понятно.

Для начала скачайте stickyfill.js (если вы фанат jQuery, то убедитесь, что библиотека включает модуль для jQuery) Подключите библиотеки в вашем HTML документе. Дальше необходимо инициализировать stickyfill для выбранного элемента.

Если вы используете jQuery, то тогда напишите следующее:

Теперь, наш "прилепленный" сайдбар должен работать корректно во всех браузерах, включая Chrome и Opera. Полифил достаточно "умный", так что он будет работать только в тех браузерах, где нужна его помощь.

Подводные камни

Есть несколько важных моментов, на которые стоит обратить внимание прежде, чем использовать "прилепленное" позиционирование на сайте.

  • Первое, высота родительского контейнера должна быть больше высоты блока, который вы хотите "прилепить".
  • Хотя Safari изначально поддерживает "прилепленное" позиционирование (правда используя префикс), но он будет отображать его некорректно, если вы будете использовать тип отображения — таблица (display: table;) Это технический дефект.
  • Полифил также имеет свои недостатки. К примеру, он не будет работать с переполненным блоком.
  • На момент написания, полифил также не имеет в своём составе JavaScript обработчика события, когда "прилепленный" элемент застрял. Это может быть очень полезным. К примеру, он позволит добавить дополнительные классы к элементу в такой ситуации.

Подводя итог

"Прилепленное" позиционирование, реализованное через CSS, является прекрасным решением, когда вам нужно просто прикрепить элемент в заданном месте экрана. Если же вам нужно что-то больше — к примеру вы хотите добавить приятные спец эффекты к "прилепленному" элементы — вам лучше использовать JavaScript библиотеку, такую как Waypoints.js.

Тем не менее несмотря ни на что, мы надеемся в скором времени увидеть улучшения не только в отношении возможностей "прилепленного" позиционирования, но также поддержки со стороны браузеров.

Привязка блока к верху страницы

Как сделать чтобы при сколлинге страницы вниз(когда 1-й блок уже скрыт), 2-й блок(нижний) привязывался к верху страницы.

На чистом css это сделать не получится. Это можно реализовать с помощью jQuery Waypoints.

Можно и без jQuery. Но совсем без JS не получится.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками position вёрстка css или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Липкое позиционирование

Липкое или приклеенное позиционирование используется для фиксации элемента в заданном месте при прокрутке страницы. Как правило, применяется к заголовкам, меню или навигации для быстрого к ним доступа или наглядности. В демонстрации ниже при прокрутке веб-страницы вниз синий блок с навигацией доходит до верхнего края окна и «приклеивается» к нему, фиксируясь на одном месте.

В данной демонстрации липкое позиционирование осуществляется с помощью значения sticky свойства position . При этом с помощью свойства top мы указываем точку, по достижении которой при прокрутке элемент превращается в фиксированный (пример 1).

Пример 1. Использование sticky

Следует понимать, что при вертикальной прокрутке для элемента имеет смысл указывать только top и bottom . При горизонтальной прокрутке будут работать только свойства left и right . Также имеет значение, чтобы высота или ширина родительского контейнера была больше размера элемента. В противном случае не будет полосы прокрутки и элемент останется на своём месте. Если в примере 1 элемент <nav> поместить внутрь <div> , то прилипание перестанет работать.

Прилипание элемента можно делать внутри блока с overflow, у которого значение задано как scroll или auto (пример 2).

Пример 2. Использование sticky и overflow

Значение sticky является относительно новым и не все браузеры его поддерживают, в частности, Internet Explorer.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *