Букмарк

На длинных страницах с кучей этажей сложно ориентироваться. Букмарк создаёт ссылки на каждый этаж и добавляет их в навигацию по странице. Уживается с любым дизайном. Прокрутите страницу, чтобы увидеть, как он работает.

Ссылки в навигации показывают порядок и длину этажей, а скроллбар — где находится пользователь. Поэтому по умолчанию активная ссылка не отличается от остальных. Если хотите дополнительно выделить активный раздел, перепишите стиль для ссылки с классом 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.

Рассказать