Sticky - плагин для закрепления элементов на странице

sticky jquery plugin
Sticky - плагин, работающий на jQuery, позволяет при прокутке вниз закреплять любые элементы, будь то картинки или текст и конечно же обрабатывать их стилями. Подобного эффекта можно добиться через CSS, используя параметр position:fixed... но не совсем :-).
Нужно это ли не нужно, не собираюсь спорить, но в арсенале у себя это скрипт оставлю. Тем более, что на основе это скрипта делалось немало интересных вещей.



Демо (прокрутить вниз; немного мешает плагин подсветки кода):

Смотреть сюда ↓
Установка.
Всего два скрипт, помимо jQuery:
1) Ссылка на sticky ставится в шаблоне перед /head
<script src="https://raw.github.com/garand/Sticky/master/jquery.sticky.js">
</script>
2) Скрипт инициализации (если нужно воздействовать разом на элементы всего блога, то перед /head, если разовое применение, то в тело сообщения):
<script> 
$(document).ready(function(){
$("#nlo").sticky({topSpacing:160,center:false});
		});
</script>
#nlo -это id, привязывает html код и стили
topSpacing:160 - расстояние в пикселях от верхнего края страницы до закреплённого объекта (bottomSpacing - до нижнего)
center:true - разрешить центрирование (не разрешить - false)
className: 'sticky' - можно привязать класс для обработки готового результата (как у меня в демо - розовое окно)
3) Html код (применяется в теле сообщения блога. Например, как у меня: текст + картинка:
<div id="nlo" style="text-align:center;">
Смотреть сюда ↓
<img border="0" height="214" width="250" src="http://3.bp.blogspot.com/-NuQAVYhXfg8/TyzoLPW4PAI/AAAAAAAAIo4/YtOreGxdPyc/s400/nlo.png" /></div>

Можете сходить и посмотреть, как авторы labs.anthonygarand.com/sticky сделали кнопки.

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

Отправить комментарий