Фиксированный плавающий блок

Если перед Вами стоит задача разместить на сайте фиксированный плавающий блок, который будет всегда находиться на одном месте даже при прокрутке страницы, но CSS свойство position: fixed; не подходит, тогда эта статья для Вас. Из статьи Вы узнаете, как легко и просто разместить фиксированный блок, который будет находиться в верхнем углу страницы, а при прокрутке фиксироваться на указанной Вами высоте.

Как это работает?

Для реализации данного способа воспользуемся библиотекой jQuery.

Добавим следующий скрипт в код нашей страницы:

В скрипте при загрузке страницы мы получаем координаты нашего блока (в данном случае с классом fixed) в переменную offset. Помимо этого мы указываем стартовую высоту (topPadding), при достижении которой блок начнет прокручиваться вместе со скроллом страницы.

Теперь добавим разметку следующего вида:

Обратите внимание на то, что у нас должен быть контейнер — элемент, в котором содержится фиксируемый блок с position: relative. Сам же плавающий блок с классом fixed должен иметь абсолютное позиционирование. Остальное оформление сугубо на Ваше усмотрение. Фиксированный плавающий блок на jQuery готов.

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

Вы также можете скачать пример работы скрипта из вложения в конце статьи.

Полезность статьи

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
4,00 / 5 баллов
1 участников
Комментарии

Здесь еще никто не оставлял комментарии.

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

* - поля обязательные для заполнения. E-mail не публикуется.