Portamento : cкользящая панель

Хочу познакомить вас с таким Jquery плагином как Portamento. Плагин представляет собой динамически передвигающийся, по мере прокрутки, слой с вашим содержимым. Это удобно для показа, например рекламного блока или меню сайта так, как они всегда перед глазами.


Установка:

1. Скачать архив с официального сайта или у нас:


2. Скопировать содержимое архива, а именно portamento.js / portamento-min.js в папку templates/ваш_шаблон/js/

3. Открыть шаблон main.tpl и в блок head добавить:

<script src="{THEME}/js/portamento.js"></script>

4. Добавить CSS стили:
Portamento оборачивает панель в элемент с ID = portamento_container. #portamento_container - обеспечивает правильное положение панели, устанавливая ей свойство position:absolute. Панель получает класс fixed, когда она скользит. Поэтому для нее надо установить свойство position:fixed.

Приведу пример:

#portamento_container {
	float:right; 
	position:relative;
}

#portamento_container #example {
	float:none; 
	position:absolute;
}

#portamento_container #example.fixed {
	position:fixed;
}

5. Настроить панель:
Для начала нам нужно понять в каких пределах будет "ездить" наш слой / панель. Приведу пример:

Для такой разметки, чтобы слой #r-slide ездил внутри слоя #right-side следует в main.tpl добавить код:

<script>
     $('#r-slide').portamento({wrapper: $('#right-side'), gap: 10});
</script>

Так же Portamento можно настроить за счет входных данных:
wrapper - элемент, который ограничивает пермещение боковой панели. Боковая панель не может выйти за его границы. По умолчанию используется элемент.

gap - количество пикселов между верхней границе области обзора и боковой панелью. По умолчанию имеет значение 10.

disableWorkaround - отключает использование обходного способа для старых браузеров. Панель будет выводиться, но не будет скользить при прокручивании страницы. • Автор: Dmitry Dark5ider