Вы находитесь здесь:Плагины jQuery»liLanding - jQuery Landing Navigation или навигация по лендингу на jQuery

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

Вторник, 03 Декабрь 2013 07:55 Автор 

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>
Прочитано 18537 раз Последнее изменение Воскресенье, 19 Июнь 2016 00:31
Оцените материал
(5 голосов)

Комментарии   

 
# Дмитрий 18.03.2014 22:34
Как подключить только функцию подсвечивания ссылки?
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 20.03.2014 15:18
Цитирую Дмитрий:
Как подключить только функцию подсвечивания ссылки?

Только подсветка http://jsfiddle.net/zW94b/14/
Ответить | Ответить с цитатой | Цитировать
 
 
# Дмитрий 12.05.2014 21:08
как сделать отступ границы в скрипте
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 12.05.2014 23:48
Цитирую Дмитрий:
как сделать отступ границы в скрипте

какой границы?
Ответить | Ответить с цитатой | Цитировать
 
 
# Дмитрий 13.05.2014 16:17
Цитирую LiMasscode:
Цитирую Дмитрий:
как сделать отступ границы в скрипте

какой границы?

как сдесь http://studialeta.ru/
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 15.05.2014 15:40
Цитирую Дмитрий:
Цитирую LiMasscode:
[quote name="Дмитрий"]как сделать отступ границы в скрипте

какой границы?

Возьмите отсюда
jsfiddle.net/zW94b/21/
Ответить | Ответить с цитатой | Цитировать
 
 
# Роман 31.05.2014 13:06
Не подскажите как увеличить скорость прокрутки (Cкролла) ?
Заранее спасибо за ответ.
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 31.05.2014 14:32
Цитирую Роман:
Не подскажите как увеличить скорость прокрутки (Cкролла) ?
Заранее спасибо за ответ.

Возьмите код отсюда
http://jsfiddle.net/zW94b/22/
я там добавил параметр speedFactor - это множитель к скорости по умолчанию.
Если вам нужно сделать прокрутку быстрее укажите значение от 0 до 1.
0,5 - в два раза быстрее
0,1 в 10 раз быстрее
Я думаю понтно
Ответить | Ответить с цитатой | Цитировать
 
 
# Роман 31.05.2014 18:52
Цитирую LiMasscode:
Цитирую Роман:
Не подскажите как увеличить скорость прокрутки (Cкролла) ?
Заранее спасибо за ответ.

Возьмите код отсюда
http://jsfiddle.net/zW94b/22/
я там добавил параметр speedFactor - это множитель к скорости по умолчанию.
Если вам нужно сделать прокрутку быстрее укажите значение от 0 до 1.
0,5 - в два раза быстрее
0,1 в 10 раз быстрее
Я думаю понтно



Спасибо за оперативный ответ.
Ответить | Ответить с цитатой | Цитировать
 
 
# Александр 02.10.2015 13:00
Якоря работают, но ссылки почему то не подсвечиваются. То есть им не добавляется class='cur'. Почему не ясно.
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 02.10.2015 13:09
Цитирую Александр:
Якоря работают, но ссылки почему то не подсвечиваются. То есть им не добавляется class='cur'. Почему не ясно.

И не станет ясно, если вы не приведет ссылку на нерабочий пример
Ответить | Ответить с цитатой | Цитировать
 
 
# Николай 04.10.2015 13:40
Цитирую LiMasscode:
Цитирую Александр:
Якоря работают, но ссылки почему то не подсвечиваются. То есть им не добавляется class='cur'. Почему не ясно.

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


Uncaught TypeError: $(...).liLandin g is not a function
Ответить | Ответить с цитатой | Цитировать
 
 
# Николай 04.10.2015 13:41
TypeError: $(...).liLandin g is not a function
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 05.10.2015 12:29
Цитирую Николай:
TypeError: $(...).liLanding is not a function

Такая ошибка возможна, если вы не правильно прописали путь к файлу с плагином.
Если файл лежит в папки "js", то путь должен быть "js/jquery.liLa nding.js"
Ответить | Ответить с цитатой | Цитировать
 
 
# Анна 27.11.2015 10:14
Мне нужно прописать в меню ссылку по типу:
landing link 1,
потому что на страницу будут ссылаться другие страницы, но тогда не работает скрипт. Что делать?
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 06.12.2015 02:15
В коде отделите меню якорей от меню со ссылками на страницы
Ответить | Ответить с цитатой | Цитировать
 
 
# Андрей 03.03.2016 12:01
Подскажите, как объединить отступ границы http://jsfiddle.net/zW94b/22/ и скорость прокрутки http://jsfiddle.net/zW94b/22/
По отдельности работают, а вместе не хотят.
Заранее спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 03.03.2016 17:31
Цитирую Андрей:
Подскажите, как объединить отступ границы http://jsfiddle.net/zW94b/22/ и скорость прокрутки http://jsfiddle.net/zW94b/22/
По отдельности работают, а вместе не хотят.
Заранее спасибо!

Что вы имеете ввиду?
Ответить | Ответить с цитатой | Цитировать
 
 
# Андрей 04.03.2016 04:11
Извините, не так выразился, и ссылки поставил неправильно.
Вот здесь http://jsfiddle.net/zW94b/22/ вы добавили функцию изменения скорости прокрутки страницы, а здесь http://jsfiddle.net/zW94b/21/ добавили возможность установить topMargin. Как эти функции объединить?
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 11.06.2016 15:54
Цитирую Андрей:
Извините, не так выразился, и ссылки поставил неправильно.
Вот здесь http://jsfiddle.net/zW94b/22/ вы добавили функцию изменения скорости прокрутки страницы, а здесь http://jsfiddle.net/zW94b/21/ добавили возможность установить topMargin. Как эти функции объединить?

Добавлено архив
Ответить | Ответить с цитатой | Цитировать
 
 
# Леонид 03.06.2016 13:25
Здравствуйте, спасибо за статью!
Все отлично работает, но к сожалению прокрутка осуществляется ниже заголовка хотя div с якорем находятся над ним :(
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 11.06.2016 15:56
Цитирую Леонид:
Здравствуйте, спасибо за статью!
Все отлично работает, но к сожалению прокрутка осуществляется ниже заголовка хотя div с якорем находятся над ним :(

Киньте ссылку
Ответить | Ответить с цитатой | Цитировать
 
 
# Леонид 16.06.2016 09:25
Цитирую LiMasscode:
Цитирую Леонид:
Здравствуйте, спасибо за статью!
Все отлично работает, но к сожалению прокрутка осуществляется ниже заголовка хотя div с якорем находятся над ним :(

Киньте ссылку

грузоперевозки- рф.москва
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 17.06.2016 09:45
Цитирую Леонид:
Цитирую LiMasscode:
Цитирую Леонид:
Здравствуйте, спасибо за статью!
Все отлично работает, но к сожалению прокрутка осуществляется ниже заголовка хотя div с якорем находятся над ним :(

Киньте ссылку

грузоперевозки-рф.москва


1. Скачайте заново архив (v.2.0)
2. Подключите к сайту новую версию скрипта.
3. При вызове плагина используйте параметр "topMargin"

$(window).load(function(){
$('.collapse'). liLanding({
topMargin:104
});
})
Ответить | Ответить с цитатой | Цитировать
 
 
# Леонид 17.06.2016 10:32
Цитирую LiMasscode:


1. Скачайте заново архив (v.2.0)
2. Подключите к сайту новую версию скрипта.
3. При вызове плагина используйте параметр "topMargin"

$(window).load(function(){
$('.collapse').liLanding({
topMargin:104
});
})

спасибо! а как к этому коду добавить еще скорость прокрутки (speedFactor: 0.3)?
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 19.06.2016 00:28
Цитирую Леонид:
Цитирую LiMasscode:


1. Скачайте заново архив (v.2.0)
2. Подключите к сайту новую версию скрипта.
3. При вызове плагина используйте параметр "topMargin"

$(window).load(function(){
$('.collapse').liLanding({
topMargin:104
});
})

спасибо! а как к этому коду добавить еще скорость прокрутки (speedFactor: 0.3)?

Добавил, скачайте заново архив
Ответить | Ответить с цитатой | Цитировать
 
 
# campusboy 21.07.2016 14:17
Спасибо большое за плагин. Возникла трудность, в большей степени из-за моей невнимательност и, но всё же. Дополните, пожалуйста, что класс landingItem нужно обязательно указывать, иначе не будет происходить добавление класса cur к ссылкам меню. Я использовал свои классы, думал... да хрен знает, о чем я думал :) в общем, время улетело на изучение кода плагина, чтобы понять, где я косякнул.
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 25.07.2016 15:03
Я думаю, если в описании по установке плагина указан код с этим классом, то этого должно хватить. А от невнимательност и никто не застрахован.
Удачных вам проектов!
Ответить | Ответить с цитатой | Цитировать
 
 
# Александр 25.12.2016 22:07
Здравствуйте!
Спасибо за классный скрипт!
Раньше уже его использовал, все работало на ура, но при верстке нового сайта с использование t3-framework почему то появляется ошибка:
скрипт частично работает, а именно плавная прокрутка до якоря, к блоку меню при прокрутке добавляется класс .landingFix
Но при загрузке страницы появляется ошибка .liLanding is not a function
сайт gals.tw1.ru
Заранее спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
# LiMasscode 26.12.2016 15:24
Цитирую Александр:
Здравствуйте!
Спасибо за классный скрипт!
Раньше уже его использовал, все работало на ура, но при верстке нового сайта с использование t3-framework почему то появляется ошибка:
скрипт частично работает, а именно плавная прокрутка до якоря, к блоку меню при прокрутке добавляется класс .landingFix
Но при загрузке страницы появляется ошибка .liLanding is not a function
сайт gals.tw1.ru
Заранее спасибо!

Ваш сайт не открывается.
Обратите внимание на порядок подключения скриптов:
1. jQuery
2. Плагин liLanding
3. Инициализация
Ответить | Ответить с цитатой | Цитировать
 
 
# Николай 10.02.2017 09:56
Добрый день, постоянно пользуюсь вашим плагином, заметил одну проблему
28 строка jquery.liLanding.js
$('a[href^=#]',el).on('click',function(){
консоль ругается на нераспознаваемы й селектор

меняю его на:
$('a[href*="#"]',el).on('click',function(){
и всё работает

может кому-то полезно будет
Ответить | Ответить с цитатой | Цитировать
 

Добавить комментарий

Защитный код
Обновить

Онлайн-конструктор українського орнаменту

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

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

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

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

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

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

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

Вы находитесь здесь:   ГлавнаяjQueryliLanding - jQuery Landing Navigation или навигация по лендингу на jQuery