liLanding - jQuery Landing Navigation или навигация по лендингу
Плагин liLanding обеспечивает плавную навигацию по информационным блокам лендинга, а также подсвечивает ссылки в меню, соответствующие видимым блокам
Пример работы на JSFIDDLE
BUG FIX
11.06.16 Добавлены параметр topMargin
04.12.13 Добавлены функции обратного вызова "show" и "hide"
Подключаемые файлы
Инициализация плагина
Структура HTML
Структура HTML кода делится на две частиПервая часть - это меню навигации по блокам лендинга: Вторая часть - это контентовые блоки лендинга
Параметры
| 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, представляющий условно скрывшийся блок лендинга |
Комментарии
Только подсветка http://jsfiddle.net/zW94b/14/
какой границы?
как сдесь http://studialeta.ru/
Возьмите отсюда
jsfiddle.net/zW94b/21/
Заранее спасибо за ответ.
Возьмите код отсюда
http://jsfiddle.net/zW94b/22/
я там добавил параметр speedFactor - это множитель к скорости по умолчанию.
Если вам нужно сделать прокрутку быстрее укажите значение от 0 до 1.
0,5 - в два раза быстрее
0,1 в 10 раз быстрее
Я думаю понтно
Спасибо за оперативный ответ.
И не станет ясно, если вы не приведет ссылку на нерабочий пример
Uncaught TypeError: $(...).liLandin g is not a function
Такая ошибка возможна, если вы не правильно прописали путь к файлу с плагином.
Если файл лежит в папки "js", то путь должен быть "js/jquery.liLa nding.js"
landing link 1,
потому что на страницу будут ссылаться другие страницы, но тогда не работает скрипт. Что делать?
По отдельности работают, а вместе не хотят.
Заранее спасибо!
Что вы имеете ввиду?
Вот здесь http://jsfiddle.net/zW94b/22/ вы добавили функцию изменения скорости прокрутки страницы, а здесь http://jsfiddle.net/zW94b/21/ добавили возможность установить topMargin. Как эти функции объединить?
Добавлено архив
Все отлично работает, но к сожалению прокрутка осуществляется ниже заголовка хотя div с якорем находятся над ним :(
Киньте ссылку
грузоперевозки- рф.москва
1. Скачайте заново архив (v.2.0)
2. Подключите к сайту новую версию скрипта.
3. При вызове плагина используйте параметр "topMargin"
$(window).load(function(){
$('.collapse'). liLanding({
topMargin:104
});
})
спасибо! а как к этому коду добавить еще скорость прокрутки (speedFactor: 0.3)?
Добавил, скачайте заново архив
Удачных вам проектов!
Спасибо за классный скрипт!
Раньше уже его использовал, все работало на ура, но при верстке нового сайта с использование t3-framework почему то появляется ошибка:
скрипт частично работает, а именно плавная прокрутка до якоря, к блоку меню при прокрутке добавляется класс .landingFix
Но при загрузке страницы появляется ошибка .liLanding is not a function
сайт gals.tw1.ru
Заранее спасибо!
Ваш сайт не открывается.
Обратите внимание на порядок подключения скриптов:
1. jQuery
2. Плагин liLanding
3. Инициализация
28 строка jquery.liLanding.js
$('a[href^=#]',el).on('click',function(){
консоль ругается на нераспознаваемы й селектор
меняю его на:
$('a[href*="#"]',el).on('click',function(){
и всё работает
может кому-то полезно будет
RSS лента комментариев этой записи