|
Вы здесь: Главная → Сборник статей → Плавающий сайдбар |
Перечень статей раздела Плавающий сайдбар:
Здравствуйте, уважаемый посетитель!
Недавно ко мне обратился пользователь с просьбой рассказать о механизме работы плавающих сайдбаров, которые используются на данном сайте.
Вообще, плавающий сайдбар нужен для того, чтобы при прокрутке страницы посетитель всегда видел размещенную в нем информацию, сколько бы не прокручивал страницу сайта. И применение такого способа представления информации может существенно увеличить количество показов в таких блоках. И как следствие, переходов по размещенным в них ссылкам.
В сети Интернет можно найти большое количество подобных примеров с прилагаемым исходным кодом. И проверить на практике разные способы реализации такого эффекта. Здесь же я покажу свои варианты, которые в свое время были проработаны и используются и в настоящее время.
Один из них на чистом CSS с применением, так называемого "липкого позиционирования", другой - с использованием языка JavaScript.
Каждый из этих способов имеет свои особенности. Например, создание плавающего сайдбара на CSS отличается простотой реализации. При том, что такое решение при прокрутке страницы пользователем обеспечивает высокое быстродействие изменений положения блоков. Обусловлено это тем, что все перемещения элементов происходят только посредством CSS.
Использовании же JavaScript позволяет реализовать, практически, любой алгоритм прокрутки. И тем самым дает возможность достаточно гибко решать реализацию эффекта плавающего сайдбара. Но так как в этом случае его перемещение происходит от отклика события прокрутки JavaScript, то такому варианту свойственна и некоторая задержка.
Вообщем, здесь можно будет посмотреть на практических примерах как это работает, и при необходимости воспользоваться наиболее подходящим для себя вариантом.
Плавающий сайдбар на sticky-css
- Как работает липкое позиционирование
- Пример практического применения позиционирования sticky
- Реализация плавающего сайдбара на тестовом сайте
- Исходные файлы сайта
Здравствуйте, уважаемый посетитель!
К сожалению, у меня получился достаточно большой перерыв в размещении новых статей. А причина здесь вполне прозаическая, так как мне пришлось непосредственно поучаствовать в пандемии и на себе испытать, что это такое COVID-19.
И хочу сказать всем тем, кто не верит в реальность этой заразы, что данный вирус, действительно, необычный, вызывающий серьезные проблемы со здоровьем. По крайней мере никогда я еще так тяжело и долго не болел. И никому не желаю это испытать.
Ну а теперь все позади и можно наконец приступить к своим текущим делам. Сегодня рассмотрим плавающий сайдбар, построенный на чистом CSS с применением, так называемого "липкого позиционирования".
Как отмечалось ранее в анонсе к разделу, особенностью данного способа, по сравнению JavaScript, является простота реализации при высоком быстродействии изменений положения сайдбара, вызванного прокруткой страницы пользователем.