jQuery plugin Sticky

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

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

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

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

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

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

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

function (el) { alert("show!"); }

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

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

$(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-верстки). Пробуйте, экспериментируйте и да прибудет с вами сила!

Скачать - free download

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

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

Заключение

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