Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

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

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Nataly Birch (you can also view the original English article)

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

Исторически сложилось так, что для создания эффекта нам нужен был 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.

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

Рекомендуем почитать

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.