Опции

  • verticalCentered: (по умолчанию true) Вертикальное центрирование содержимого внутри разделов.
  • scrollingSpeed: (по умолчанию 700) Скорость в миллисекундах для переходов прокрутки.
  • sectionsColor: (по умолчанию none) Определяет свойство CSS background-color для каждого раздела: Пример:
$('#pagepiling').pagepiling({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
  • anchors: (по умолчанию []) Определяет якорные ссылки (#example), которые будут отображаться в URL для каждого раздела. При использовании якорей навигация вперед и назад будет также возможна через браузер. Эта опция также позволяет пользователям делать закладки на определенный раздел. Будьте внимательны! Если вы используете якоря, они не могут иметь то же значение, что и любой элемент ID на сайте (или элемент NAME для IE).
Важно! Важно понимать, что значения в массиве опций anchors напрямую соотносятся с элементом с классом .section по его положению в разметке.
  • easing: (по умолчанию swing) Определяет эффект перехода, который будет использоваться для вертикальной прокрутки. Для использования любого другого перехода, кроме swing и linear, требуется jQuery UI. Вместо этого можно использовать другие библиотеки.
  • loopTop: (по умолчанию false) Определяет, должна ли прокрутка вверх в первой секции прокручиваться до последней или нет.
  • loopBottom: (по умолчанию false) Определяет, должна ли прокрутка вниз в последней секции прокручиваться до первой или нет.
  • css3: (по умолчанию true). Определяет, использовать ли JavaScript или CSS3 преобразования для прокрутки внутри разделов. Полезно для ускорения перемещения на планшетных и мобильных устройствах с браузерами, поддерживающими CSS3. Если этот параметр установлен в true и браузер не поддерживает CSS3, то вместо этого будет использоваться запасной вариант jQuery.
  • normalScrollElements: (по умолчанию null) Если вы хотите избежать автопрокрутки при прокрутке над некоторыми элементами, вам нужно использовать именно эту опцию. (полезно для карт, прокручиваемых div и т.д.) Для этого требуется строка с селекторами jQuery для этих элементов. (Например: normalScrollElements: '#element1, .element2')
  • normalScrollElementTouchThreshold: (по умолчанию 5) Определяет порог для количества переходов вверх по дереву html-узлов pagePiling будет проверять, соответствует ли normalScrollElements, чтобы разрешить функцию прокрутки div-ов на сенсорном устройстве. (Например: normalScrollElementTouchThreshold: 3)
  • keyboardScrolling: (по умолчанию true) Определяет, можно ли перемещаться по содержимому с помощью клавиатуры.
  • touchSensitivity: (по умолчанию 5) Определяет процент от ширины/высоты окна браузера и расстояние, на которое нужно провести пальцем для перехода к следующему разделу.
  • animateAnchor: (по умолчанию true) Определяет, будет ли загрузка сайта при указании якоря (#) прокручиваться с анимацией до места назначения или будет загружаться непосредственно на указанный раздел.
  • direction: (по умолчанию vertical) Определяет, будет ли прокрутка вертикальной или горизонтальной.
  • menu: (по умолчанию false) Селектор может быть использован для указания меню, которое будет связано с разделами. Таким образом, при прокрутке разделов будет активироваться соответствующий элемент в меню с использованием класса active. При этом меню не создается, а просто добавляется класс active к элементу данного меню с соответствующими якорными ссылками. Для того чтобы связать элементы меню с разделами, необходимо использовать HTML 5 data-tag (data-menuanchor) с теми же якорными ссылками, которые используются в разделах. Пример:
<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>
$('#pagepiling').pagepiling({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});
Примечание! Элемент меню должен быть размещен вне обертки pagePiling (в примере выше id="pagepiling"), чтобы избежать проблем при использовании css3:true. В противном случае он будет добавлен к body самим плагином.
  • navigation: (по умолчанию false) Если установить значение true, то будет отображаться панель навигации, состоящая из маленьких кружков.
  • sectionSelector: (по умолчанию .section) Определяет селектор jQuery, используемый для секций плагина. Иногда его нужно менять, чтобы избежать проблем с другими плагинами, использующими те же селекторы, что и pagePiling.js.

Была ли эта страница полезной?