Сайт Земскова Ильи
Веб-мастер, к.т.н., «200000».
Бензин ваш - идеи наши © И.Ильф и Е.Петров

jQuery plugin Sticky

Перед вами элегантный и гибкий в настройках jQuery-плагин, который позволяет при прокрутке страницы вниз закреплять любые элементы, будь то меню или виджеты в сайдбаре. Такое закрепление позволяет привлечь дополнительное внимание аудитории к тем или иным блокам информации (формам подписки, виджетам социальных сетей, баннерам/тизерам, меню и т.п. элементам сайта), что улучшает поведенческие факторы сайта и/или повышает конверсию привлекаемой аудитории.

jQuery plugin Sticky

Плагин частично повторяет возможности аналогичных jquery-разработок, но имеет и свои отличительные особенности. В частности:

  • плагин умеет «залиплять» блоки двумя различными визуальными способами («залипить после промотки всех блоков сайдбара за границу экрана» и «залипить непосредственно на границе залипания»);
  • плагин умеет «залиплять» горизонтальное меню в шапке сайта, даже если оно изначально не было предназначено для этого;
  • плагин умеет отключать свою работу на низких разрешениях экрана;
  • плагин умеет красиво «залиплять» разбросанную по сайдбару группу виджетов (если виджетов несколько, то залипание всех виджетов кроме последнего осуществляется только на высоту залипающего виджета - после промотки страницы дальше, чем высота залипшего виджета, он «разлипает» и тем самым передаёт эстафетную палочку даёт возможность залипнуть следующему нужному виджету в сайдбаре);
  • плагин умеет использовать дополнительный css-стиль для состояния «залип»;
  • плагин умеет выполнять callback-функции при смене состояния (залип/разлип).

Установка и настройка

Установка простая и стандартная для jquery-плагинов: подключаете последнюю версию jQuery и после него уже сам скрипт jquery.sticky.min.js. Вызов плагина - тоже простой:

<script type="text/javascript">
$(window).load(function(){
	$('.sticky_widget').sticky();
});
</script>

При таком вызове Sticky плагин будет использовать для параметров значения по-умолчанию. Если вам нужно изменить дефолтные настройки, то ориентируйтесь на следующую таблицу параметров плагина (в таблице «пустые» значения по-умолчанию помечены прочерком «-»):

ПараметрОписаниеЗначение «по-умолчанию»
topspacingотступ (в пикселях) сверху при выводе «прилипшего виджета»20
stopperселектор блока, при достижении верхней границы которого виджет будет останавливаться и/или исчезать.footer
marginbottomотступ (в пикселях) от нижней границы страницы, дальше которого виджет не сможет «продвинуться»150
stylerclass, который будет приписываться блоку при залипании (название указывать без точки)-
unlockwidthзаставляет «разблокировать» ширину прилипшего блока (т.е. не сохранять исходную ширину блока). Для активации укажите «true» или «1». Параметр в основном применяется при реализации залипания горизонтального меню в шапке сайта.false
animdurationпродолжительность анимации при способе залипания «afterall». Для отключения анимации укажите «0»500
sticktypeспособ («тип») залипания. Доступно три значения: afterall, alonemenu, directly. Вот описание типов:

  • При способе «afterall» виджет будет проявляться только после того, как все виджеты сайдбара уйдут за верхнюю границу экрана.
  • Чтобы блок залипал сразу и не ждал исчезновения с экрана последнего виджета укажите «directly».
  • Значение «alonemenu» предназначено только для работы с горизонтальным меню в шапке и приводит к залипанию блока при первом касании верхней границы экрана верхней границы блока.
afterall
screenlimitОпция, указывающая прекращать ли работу плагина на низких разрешениях экрана? К низким разрешениям относятся: ширина экрана меньше 1024 пикселей, высота экрана меньше 500 пикселей. Также работа останавливается на мобильных устройствах (имеющим в подписи браузера метки: android, webos, iphone, ipad, ipod или blackberry).true
stickcallback-функция, которая вызывается в момент «залипания». Код должен быть указан в одну строку и оформлен в виде описания безымянной функции с одним передаваемым в неё параметром (в него передаётся информация и залипающем блоке), например, так:
function (el) { alert("show!"); }
-
unstickcallback-функция, которая вызывается в момент окончания «залипания». Код оформляется аналогично функции stick-

Демонстрация работы

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

$(window).load(function(){
	// виджеты в левом сайдбаре
	$('#sidebar-lt .sticky').sticky({
		topspacing: 45,
		stopper: '#footer',
		marginbottom: 0,
		sticktype: 'directly',
		stick: function (el) { $(el).css('border', '5px solid #000'); },
		unstick: function (el) { $(el).css('border', 'none'); }
	});
	
	// виджет в правом сайдбаре
	$('#sidebar-rt .sticky').sticky({
		topspacing: 45,
		stopper: '#footer',
		marginbottom: 0,
		sticktype: 'afterall'
	});
	
	// картинка в тексте
	$('#article .sticky').sticky({
		topspacing: 45,
		stopper: '#footer',
		marginbottom: 0,
		sticktype: 'directly'
	});
	
	// меню в шапке
	$('#menu').sticky({
		topspacing: 0,
		stopper: '#footer',
		marginbottom: 0,
		styler: 'topMenuStyler',
		animduration: 0,
		sticktype: 'alonemenu'
	});
});

Думаю, что на основе приведённого выше кода вы относительно просто сможете настроить использование плагина на своём сайте. Если вдруг не получится достичь желаемого эффекта «из коробки» - не отчаивайтесь! Возможно вам всего лишь требуется немного модернизировать используемые css-стили (в частности для опции styler) и/или активнее использовать возможности callback-функций (там доступны любые манипуляции с DOM, что позволит исправить любые мешающие работе огрехи html-верстки). Пробуйте, экспериментируйте и да прибудет с вами сила! wink

Скачать - free download

Краткая информация о текущей версии плагина:

Версия плагина: 0.7
Размер min-версии плагина: 2,55 Кб
ZIP архив: 3,98 Кб
Связи: стабильно работает с jQuery 1.9 и выше.
Условия использования: jQuery-плагин предоставляется AS IS («как есть») - без гарантий и техподдержки. При использовании и распространении плагина должна быть сохранена информация об авторе.
Скачать: jquery_sticky_0_7.zip360

Заключение

Изначально js-код плагина разрабатывался мной в качестве основы для одноимённого MaxSiteCMS-плагина, но т.к. js-часть вызвала живой интерес у вебмастеров, то я решил опубликовать её отдельно в виде самостоятельного jQuery-плагина. Надеюсь, что вам он тоже понравится и пригодится. Поделиться со мной своей радостью от использования ладной штуки на вашем сайте вы можете с помощью перевода на мой ЯД-кошелёк любой комфортной вам суммы через эту форму (можно переводить с банковской карты):

Комментариев: 2

Дмитрий написал(-а):

А можно этот виджет применить к шапке таблицы?

Сам не делал такого, но думаю, что должно получится. Хотя, конечно, всё будет зависеть от условий...