Плагины для frontend разработчика - Waypoint
HTML-код
- Опубликовано: 16 ноя 2024
- Пройди БЕСПЛАТНО профориентацию в IT - bit.ly/2NLILne
В этом уроке мы разберем с вами довольно часто встречающийся на данный момент плагин, который называется Waypoint.
И сделаем с вами "живую" навигацию.
Школа онлайн-образования: loftschool.com/
Telegram: telegram.me/lo...
Slack: slack.loftblog.ru/
Сайт: loftblog.ru/
Instagram: / loftblog
Группа вконтакте: loftblog
Facebook: / loftblog
Twitter: / loft_blog
Больше уроков от lofblog: #loftblog
Все уроки по хештегу: #loftblogPlugin
Полезные уроки для веб-программиста: #вебпрограммист
#jquery #html #css
Поставь лайк - смотивируй автора писать еще :)
Артем, очень полезный урок!
Спасибо Коль :)
Артем молодец, хорошие уроки. Прям как-будто давным-давно уроки пишешь :)
Спасибо :)
Спасибо!!! Очень познавательно! С нетерпением жду продолжения!!
Должны опубликовать в пятницу. Крутой урок, должен очень понравится :)
Очень интересно и кстати. Как раз на учебном проекте надо это реализовать. Спасибо.
Всегда пожалуйста :)
Спасибо, по чаще бы, такую "рубрику" :)
Пожалуйста :)
Артём Анашев А будет видео в 1080р?
Максим Денисюк Простите, то долго не отвечал.
В 1080 вряд ли.
Спасибо, отличный плагин! Не знал раньше как реализовать это =)
Спасибо, было интересно
Спасибо за урок :)
спасибо, все четко и понятно!
Артем красавчег!!!!
Все отлично, только как ещё добавить к твоему скрипту скорость скрола к id. Чтоб не добавлять доп скрипт scrollto.
Ребят, как насчет того чтобы сделать выпуск про Паралакс-плагин. ЛАЙК ЕСЛИ ТОЖЕ ХОЧЕШЬ!!!!
Спасибо, как всегда супер=))
Очень приятно, спасибо :)
круто, спасибо автору!
А можно сделать уроки по basisjs? )
Какой у тебя микрофон? Расскажи пожалуйста, тоже хочу записывать видео уроки, но не могу определиться с микрофоном, и какой аудио интерфейс? Помоги
Привет. Я пишу на встроенный микрофон он iPhone :D Вот и вся магия :)
Артём Анашев
тогда все понятно, в этом плане apple качественно все делают, ну тогда придется покупать микрофон который уже присмотрел, но он того стоит.. Спасибо за ответ
DengineStudios Да всегда пожалуйста
подскажите как сделать так чтобы при переходе по якорям текст не залезал под меню. нашел вот такой код но он у меня не работает, сделано у меня всё как у вас в примере:
var hash_id = location.hash.substr(1);
$(window).load(function() {
if (hash_id) {
$("html,body").animate({
scrollTop: $('#' + id).offset().top - 50
}, 500);
}
});
Сделал все, как описывалось в уроке - не работает. Вывожу в лог, на этапе var hash = $(this).attr('id'); переменная hash имеет статус undefined. Почему?
есть же scrollspy
счастья тебе добрый человек ;)
можешь сделать на animateNumber ?
Спасибо большое :)
Не слышал про этот плагин, поэтому обязательно посмотрю и постараюсь снять.
github.com/aishek/jquery-animateNumber
Вот ссылка на него =)
Игорь Васильев ok :)
Не ясно как подружить его с Bootstrap Carousel ...
Когда кликаеш "chevron-right" карусель немного подежджает вверх и все.
Слайды переключаються только через навигацию внизу(точки)
При отключенном Waypoints все гуд.
Іван Боднар решил добавленеем :not([href=#myCarousel]) в скрипте Smooth Scrolling
зачем перебирать все если можно было написать
$('.tracked').waypoint(function(){
var hash = $(this).attr('id');
navLi.find("[href='" + hash+ "']").addClass('active');
});
api.jquery.com/attribute-equals-selector/
так же раз у лишек нету класса кроме active лучше писать removeAttr('style') а не removeClass, т.к. она выполняется быстрее
Хотел тоже самое написать про перебор, не успел =)
только вы в выборке пропустили значек хэша:
navLi.find("[href=#'" + hash+ "']").addClass('active');
Да, совершенно верно!
Просто всегда так делал, спасибо за комментарий, буду знать еще один способ :)
Делал по шагам.
$('.tracked').waypoint(function(){
alert($(this).attr('id'));
});
Alert говорит undefined. Сделал все один в один.
Может кто знает в чем проблема. Буду признателен за помощь.
Евгений Вовк такая же хрень
Вячеслав Тернов Найди более старую версию она работает нормально github.com/agragregra/wordpress-landing-page-lesson тут есть в файлах нормальный waypoint поищи
Евгений Вовк чуть выше подсказали, используйте $(this.element).
все круто, но у меня не выходит! застряла на фазе, где убиваем хэш. Хелп плиз!
+Яна Каминская
Здесь берите старый вэйпойт github.com/agragregra/wordpress-landing-page-lesson
jQuery(document).ready(function() {
var navLi = $("nav li");
$('.tracked').waypoint(function(){
var hash = $(this).attr('id');
console.log(hash);
$('nav li').removeClass("active");
$.each(navLi, function(){
href = $(this).children('a').attr('href').slice(1);
if (href==hash) {
$(this).addClass("active");
};
})
}, {offset:'50%'});
});
у меня работает
спасибо!
У всех у кого выдает undefined подключайте новую библиотеку, например вот сразу удаленно
Cool
Помогите
Подключил
Применил .waypoint() а выдало:
Uncaught TypeError: undefined is not a function
+Edchalio посмотрите на офф сайт, возможно за это время они обновили доку. Но ваша ошибка на самом деле связана более вероятно с тем, что объект, на котором вы вызываете waypont просто 'undefined'
Странно но this не работает
Александр Крылов вместо $(this) используйте $(this.element), или найдите более старую версию
Андрей Рябченко найти старую версию чего?
Версию плагина
Приветствую. Делала всё как в уроке , но...... В общем alert выдаёт undefined, пробовала в место $(this) писать $(this.element) и всё равно undefined выводит. Помогите пожалуйста! Уже 2 дня не могу понять в чём дело(((((
JS
var navigationLi = $(".navigation li");
$(".tracked").waypoint(function(){
var hash = $(this).attr('id');
alert(hash);
});
HTML
skokov
home
services
about us
news
contact
Global management consulting agency
Growth doesn't always go the way you expect. Our strategy consultants can help you climb.
Get started
Learn more
Таже беда, не знаю в чём дело