Portamento.js

Portamento - плагин jQuery для простого создания боковой скользящей панели на вашей старнице. Все что нужно - добавить несколько простых правил CSS и одну строку кода JavaScript!

Работает во всех современных браузерах, и в устаревших тоже.

Демонстрации

Реальный пример

Portamento используется в действующем проекте:

Использование

Использовать Portamento просто.

  1. Включаем portamento.js в код страницы перед тегом </body>:

    <script src="portamento.js"></script>

  2. В коде JavaScript используем селектор элемента, который будет боковой панелью. В нашем примере такой элемент имеет идентификатор #example:

    $('#example').portamento();

    Portamento нужно запускать после полной загрузки страницы, поэтому лучше использовать функцию $(document).ready().

  3. Добавим несколько правил 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;
}

    Все достаточно просто. Сомотрите демонстрационные примеры.

  4. Настраиваем Portamento с помощью опций:

    $('#example').portamento({wrapper: $('#example_wrapper'), gap: 50});

  5. Готово!

Опции

Вы можете настраивать Portamento с помощью следующих опций:

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

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

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

Браузерная поддрежка

Все браузеры, которые поддерживают свойство CSS position: fixed будут выводить панель с полным функционалом: IE7+, Firefox 3+, Safari 4+ (не iOS), Chrome 4+, Opera 10+.

Для остальных браузеров (включая iOS и IE<7) используется обходной способ - сохраняется перемещение панели, но не такое плавное. Его можно отключить с помощью опции disableWorkaround.

Ограничения

style.css 4 kB

html5.js 2 kB

jquery.min.js 86 kB

portamento.js 9 kB

functions.js 0.2 kB