На длинных страницах с кучей этажей сложно ориентироваться. Букмарк создаёт ссылки на каждый этаж и добавляет их в навигацию по странице. Уживается с любым дизайном. Прокрутите страницу, чтобы увидеть, как он работает.
Ссылки в навигации показывают порядок и длину этажей, а скроллбар — где находится пользователь. Поэтому по умолчанию активная ссылка не отличается от остальных. Если хотите дополнительно выделить активный раздел, перепишите стиль для ссылки с классом active.
Букмарк автоматически даст названия ссылкам на этажи, если не найдёт название в атрибуте name. Чтобы можно было ссылаться на этаж, в адресную строку он добавит транслитированное название или data-hash ссылки. Отключить изменение строки можно атрибутом data-hashChange.
Отдельный кайф — как меню появляется и исчезает. Анимация не бесит при скролле как на короткие, так и на длинные расстояния.
Добавьте ссылки на скрипт и стили в <head> страницы:
<head> <link href="path/to/bookmark.min.css" rel="stylesheet" /> <script src="path/to/jquery.js"></script> <script src="path/to/bookmark.min.js"></script> </head>
Добавьте класс bookmarks блоку с закладками:
<div class="bookmarks"> <div class="bookmark" name="Первая закладка" data-hash="first"></div> <div class="bookmark" name="Вторая закладка" data-hash="second"></div> </div>
Или отметьте места-закладки классом bookmark и запустите скрипт, как стандартный плагин:
<div class="foo"> <h1 class="bookmark" name="Первая закладка" data-hash="first">Заголовок</h1> </div> <script type="text/javascript"> $(function(){ $('.foo').bookmark(); }); </script>
Параметры указываются в data-атрибутах блока с закладками. При ручной инициализации передайте объект с параметрами, как аргумент функции-конструктора.
Параметры onScrollStart и onScrollEnd можно настроить только при ручной инициализации.
Пример с настройкой всех возможных свойств:
<head> <link href="path/to/bookmark.min.css" rel="stylesheet" /> <script src="path/to/jquery.js"></script> <script src="path/to/bookmark.min.js"></script> </head> <body> <div class="foo" data-touchDevices="false" data-hashChange="false" > <h1 class="bookmark" name="Первая закладка" data-hash="first">Заголовок</h1> </div> <script type="text/javascript"> $(function(){ $('.foo').bookmark({ autoHide: true, autoHideTime: 900, fadeTime: 400, scrollingTime: 500, bookmarkClassName: 'bookmark', onScrollStart: function(curIndex, nextIndex) {}, onScrollEnd: function(curIndex, nextIndex) {} // curIndex — номер текущего раздела // nextIndex — номер следующего раздела // оба аргумента необязательные }); }); </script> </body>
Предложения и замечания присылайте на bespoyasov@me.com.