Элемент атрибут ID return undefined

Я попытался работать с 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>

Ответ 1

В waypoints.js я обнаружил, что this относится к внутреннему объекту путевых точек. Если вы выполните console.log, вы легко найдете, как выбрать этот элемент с помощью jquery.

handler: function (direction){
    var DOMElement = $(this.element);
    console.log($(this.element).attr('data-id');
}

Ответ 2

Как упоминалось @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();

Пример здесь