Я попытался работать с waypoints.js и активировать элемент меню, когда пользователь прокручивает его. Как я вижу, путевые точки работают хорошо, но я не могу получить текущий раздел id... Консоль всегда говорила undefined.
Итак, что я делаю неправильно?
Мой script:
jQuery(function() {
var sections = jQuery('section');
var navigation_links = jQuery('nav a');
sections.waypoint({
handler: function(direction) {
var active_section;
active_section = jQuery(this);
if (direction === "up") active_section = active_section.prev();
var active_link = jQuery('nav a[href="#' + active_section.attr("id") + '"]');
navigation_links.parent().removeClass("active");
active_link.parent().addClass("active");
active_section.addClass("active-section");
console.log(active_section.attr("id"))
},
offset: '35%'
});
});
Мой HTML nav:
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#spec">What we do</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#tools">Tools</a></li>
<li><a href="#contacts">Contacts</a></li>
</ul>
Мой HTML section:
<section id="home">
<div class="wrap">
<h1>...</h1>
</div>
</section>
В waypoints.js я обнаружил, что this относится к внутреннему объекту путевых точек. Если вы выполните console.log, вы легко найдете, как выбрать этот элемент с помощью jquery.
handler: function (direction){
var DOMElement = $(this.element);
console.log($(this.element).attr('data-id');
}
Как упоминалось @AmmarCSE, проблема действительно с if (direction === "up") active_section = active_section.prev();. В принципе, если предыдущий элемент не имеет id, тогда undefined будет напечатан в консоли. Чтобы избежать этого, нужно проверить, что предыдущий элемент имеет id (проверьте и убедитесь, что он не undefined), а затем установите active_section следующим образом:
var prev_section_id = active_section.prev().attr("id");
if (direction === "up" && typeof prev_section_id != 'undefined')
active_section = active_section.prev();