Запускаем Букмарк
Букмарк — навигация по странице, которая не занимает места.
На длинных страницах с кучей этажей сложно ориентироваться. Букмарк создаёт ссылки на каждый этаж и добавляет их в навигацию по странице. Уживается с любым дизайном.
Ссылки в навигации показывают порядок и длину этажей, а скроллбар — где находится пользователь. Поэтому по умолчанию активная ссылка не отличается от остальных. Если хотите дополнительно выделить активный раздел, перепишите стиль для ссылки с классом active
.
Букмарк автоматически даст названия ссылкам на этажи, если не найдёт название в атрибуте name. Чтобы можно было ссылаться на этаж, в адресную строку он добавит транслитированное название или data-hash
ссылки. Отключить изменение строки можно атрибутом data-hashChange
.
Отдельный кайф — как меню появляется и исчезает. Анимация не бесит при скролле как на короткие, так и на длинные расстояния.
C чего начать?
Добавьте ссылки на скрипт и стили в <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
-атрибутах блока с закладками. При ручной инициализации передайте объект с параметрами, как аргумент функции-конструктора.
autoHide
(boolean
), по умолчаниюtrue
, автоматически скрывать меню;autoHideTime
(number
), по умолчанию 800 мс, время, после которого меню скроется;fadeTime
(number
), по умолчанию 400 мс, скорость исчезновения;scrollingTime
(number
), по умолчанию 500 мс, длительность прокрутки после клика на ссылку;bookmarkClassName
(string
), по умолчаниюbookmark
, класс якорей-закладок;touchDevices
(boolean
), по умолчаниюfalse
, отображение на тач-устройствах.autoHide
не работает;onScrollStart
(function
) вызывается перед прокруткой к разделу;onScrollEnd
(function
) вызывается после прокрутки к разделу.
Параметры 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!