Вы находитесь здесь:jQuery»Плагины jQuery

liLanding - jQuery Landing Navigation или навигация по лендингу

Плагин liLanding обеспечивает плавную навигацию по информационным блокам лендинга, а также подсвечивает ссылки в меню, соответствующие видимым блокам

Пример работы на JSFIDDLE

BUG FIX

11.06.16 Добавлены параметр topMargin
04.12.13 Добавлены функции обратного вызова "show" и "hide"

Подключаемые файлы




Инициализация плагина

<script>
$(window).load(function(){
  $('.landingMenu').liLanding();
})
</script>

Структура HTML

Структура HTML кода делится на две части
Первая часть - это меню навигации по блокам лендинга: Вторая часть - это контентовые блоки лендинга
1
2
3
4
5

Параметры

Option Default value Datatype Description
topMargin 0 Number Указывает отступ блока от верхнего края экрана, px.
Может принимать значения: любое целое положительное число
speedFactor 1 Number Указывает множитель к продолжительности анимации. Если вам нужно сделать прокрутку быстрее укажите значение от 0 до 1; 0,5 - в два раза быстрее; 0,1 в 10 раз быстрее.
Может принимать значения: любое целое положительное число

События

show( linkEl, landingItem )

Срабатывает, когда один из блоков лендинга появляется в условно видимой зоне

Option Type Description
linkEl Object Объект jQuery, представляющий подсвеченную ссылку
landingItem Object Объект jQuery, представляющий условно видимый блок лендинга

hide( linkEl, landingItem )

Срабатывает, когда один из блоков лендинга скрылся за пределами условно видимой зоны

Option Type Description
linkEl Object Объект jQuery, представляющий погасшую ссылку
landingItem Object Объект jQuery, представляющий условно скрывшийся блок лендинга

Пример кода с обратным вызовом

Указываем функцию обратного вызова при инициализации
<script>
$(window).load(function(){
  $('.landingMenu').liLanding({
    show: function (linkEl, landingItem) {},
    hide: function (linkEl, landingItem) {}  
  });
})
</script>
Онлайн-конструктор українського орнаменту

Чем вы можете помочь?

1. Разместить ссылку на своем сайте
Если вы ведете блог или у вас есть сайт - поставьте ссылку на www.masscode.ru. Скопируйте этот код:

<a href="/" title="Плагины, сниппеты и пользовательские скрипты на jquery" target="_blank">Плагины, сниппеты и пользовательские скрипты на jquery</a>

2. Поддержать проект финансово
Вы можете сделать добровольное пожертвование

AUH: U878157792792
USD: Z821422743261
RUB: R360648948582
EUR: E298388086680

Свежие материалы

Последние коментарии

Вы находитесь здесь:   ГлавнаяjQueryПоказать содержимое по тегу: one page Navigation