Плагины для frontend разработчика - Waypoint

В этом уроке мы разберем с вами довольно часто встречающийся на данный момент плагин, который называется Waypoint.
И сделаем с вами "живую" навигацию.

Больше уроков от lofblog: #loftblog
Все уроки по хештегу: #loftblogPlugin
Полезные уроки для веб-программиста: #вебпрограммист
#jquery #html #css

Поставь лайк - смотивируй автора писать еще :)

[dmitry]

Артем молодец, хорошие уроки. Прям как-будто давным-давно уроки пишешь :)

[denweb]

Спасибо!!! Очень познавательно! С нетерпением жду продолжения!!

[misha]

Очень интересно и кстати. Как раз на учебном проекте надо это реализовать. Спасибо.

[mihail]

Спасибо, по чаще бы, такую "рубрику" :)

[ALMGREGOR]

Спасибо, отличный плагин! Не знал раньше как реализовать это =)

[maxgloba_dev]

Все отлично, только как ещё добавить к твоему скрипту скорость скрола к id. Чтоб не добавлять доп скрипт scrollto.

[ВоваПавловский-гы]

Ребят, как насчет того чтобы сделать выпуск про Паралакс-плагин. ЛАЙК ЕСЛИ ТОЖЕ ХОЧЕШЬ!!!!

[dmitriyzhukov]

Сделал все, как описывалось в уроке - не работает. Вывожу в лог, на этапе var hash = $(this).attr('id'); переменная hash имеет статус undefined. Почему?

[АндрейПодрезов-ет]

подскажите как сделать так чтобы при переходе по якорям текст не залезал под меню. нашел вот такой код но он у меня не работает, сделано у меня всё как у вас в примере:
<script type="text/javascript">
var hash_id = location.hash.substr(1);
$(window).load(function() {
if (hash_id) {
$("html, body").animate({
scrollTop: $('#' + id).offset().top - 50
}, 500);
}
});
</script>

[OnlineGamePlaying]

Какой у тебя микрофон? Расскажи пожалуйста, тоже хочу записывать видео уроки, но не могу определиться с микрофоном, и какой аудио интерфейс? Помоги

[mrVandecko]

Не ясно как подружить его с Bootstrap Carousel ...
Когда кликаеш "chevron-right" карусель немного подежджает вверх и все.
Слайды переключаються только через навигацию внизу(точки)
При отключенном Waypoints все гуд.

[ihorslabitskyi]

счастья тебе добрый человек ;)
можешь сделать на animateNumber ? 

[ЯнаКаминская-ек]

все круто, но у меня не выходит! застряла на фазе, где убиваем хэш. Хелп плиз!

[yevheniivovk]

Делал по шагам.

   alert($(this).attr('id'));
});
Alert говорит undefined. Сделал все один в один.
Может кто знает в чем проблема. Буду признателен за помощь.

[ChuwAkss]

зачем перебирать все если можно было написать

    var hash = $(this).attr('id');
    navLi.find("[href='" + hash+ "']").addClass('active');
});

так же раз у лишек нету класса кроме active лучше писать removeAttr('style') а не removeClass, т.к. она выполняется быстрее

[Edchalio]

Помогите 

Подключил
<script

Применил .waypoint() а выдало:

Uncaught TypeError: undefined is not a function

[mixaxa]

Приветствую. Делала всё как в уроке, В общем alert выдаёт undefined, пробовала в место $(this) писать $(this.element) и всё равно undefined выводит. Помогите пожалуйста! Уже 2 дня не могу понять в чём

JS
var navigationLi = $(".navigation li");

var hash = $(this).attr('id');
alert(hash);
});

HTML
<header class="header">
<div class="header_sticky_block animated slideInDown">
<div class="container
<a href="Javascript://" class="logotip red">skokov</a>
<a href="Javascript://" class="nav_tah"><i class="fa fa-bars" aria-hidden="true"></i></a>
<nav class="nav animacion_nav">
<ul class="navigation">
<li><a href="index.html"
<li><a href="#our_services_anchor"
<li><a href="#about_us_anchor" class="nav_link">about us</a></li>
<li><a href="news.html"
<li><a href="#contact_anchor"
</ul>
</nav>
</div>
</div>
<div class="container container_main_tagline">
<h1 class="main_tagline animated fadeInDown">Global management consulting agency</h1>
<p class="main_tagline">Growth doesn't always go the way you expect. Our strategy consultants can help you climb.</p>
<a href="Javascript://" class="left_btn left animated fadeInUp">Get started</a>
<a href="Javascript://" class="right_btn left animated fadeInUp">Learn more</a>
</div>
</header>
<section class="main_content">
<article class="container">
<div class="row our_services"">
<div id="our_services_anchor" class="tracked"></div>

</article>
<article class="contact_Us">
<div class="container">
<a href="Javascript://" class="contact_Us_btn wow tada">Contact Us</a>
</div>
</article>
<article id="about_us_anchor" class="about_us tracked">
<div class="container">
<h3 class="title about_us_title wow zoomIn">About us</h3>
<p class="text_title wow zoomIn">SKOKOV is one of the world's leading management consulting firms.</p>
</div>
</article>
<footer class="footer">
<div id="contact_anchor" class="container
</footer>