Element Attribute ID Return Undefined

I tried to work with waypoints.js and make menu element active, when user scroll to it. As I can see, waypoints works well, but I can't get current section id... Console always sai

Solution 1:

In waypoints.js I've found that this refers to a waypoints internal object. If you console.log it though, you easily find how to select that element with jquery.

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

Solution 2:

As mentioned by @AmmarCSE the problem is indeed with if (direction === "up") active_section = active_section.prev();. Basically if the previous element does not have an id then undefined will be printed in the console. A way to avoid this is to check that the previous element has an id (check and make sure it's not undefined), an only then set active_section like so:

var prev_section_id = active_section.prev().attr("id");
if (direction === "up" && typeof prev_section_id != 'undefined') 
    active_section = active_section.prev();

Example Here

Solution 3:

This worked for me, only this will not return the id

$('.section').waypoint(function(){alert('this.element.id');});