Плагин для создания плавающих блоков.

Плагин JQuery.Pin.

Сегодня поговорим о JQuery плагине который позволяет «приклеить» любой блок к верхней части другого блока. Например, можно заставить меню всегда располагаться на одном месте на экране монитора, независимо от скроллинга контента. Или приклеить блок с кнопкой «заказать» внутри блока с информацией о товаре. И если информации много, то при прокрутке страницы кнопка всегда будет перед глазами. Для следующего блок может быть своя кнопка и так далее.



Подключение плагина довольно простое. Прежде всего между тегами <head > и </head > подключаем файлы jquery-1.10.2.min.js и jquery.pin.js:


Блоку, который хотим «приклеить» присваиваем класс «pinned». И перед закрывающим тегом </body > прописываем скрипт:

Данный скрипт можно прописать и внутри тега <head >, но разработчики, почему-то рекомендуют прописывать именно в конце страницы.
Если необходимо закрепить блок внутри другого блока, то основному блоку задаем класс «container clearfix», закрепляемому блоку класс «pinned» и прописываем в файле стилей следующие стили:
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
Скрипт в этом случае будет выглядеть так:

Для отключения скрипта на маленьких экранах добавляем минимальную ширину блока:

На этом установка плагина закончена.
Официальный сайт: http://webpop.github.io/jquery.pin

1 комментарий :

  1. Огромное Спасибо! Ваш плагин очень выручил. Так как заказчик забыл сказать, что блок будет плавающим, а в конце работы вдруг про это вспомнил. Не очень приятно, но Ваш плагин - чудо, очень выручил.

    ОтветитьУдалить

Ваш комментарий: