I'm trying to use jquery waypoints when an element is scrolled on the screen, I need to get the name attribute of the visible element to highlight a menu. But I can't seem to get it to do anything. My code currently alerts "x" when the item is within the viewport, but no other jquery works..
$('.anchor-point').waypoint(
function(){
$('.side-bar li').removeClass('active');
//$(this).addClass('testing'); ### this does nothing ###
//var name = $(this).attr('name');
//alert(name); ### this alerts as undefined ###
alert('x'); ### this alerts "x" ###
}
);
<div class="scroller">
<a name="item-01" class="heading anchor-point"></a>
<p> Nunc ultrices eget sem ut blandit. Etiam tempor ultricies pellentesque. Ut orci quam, rutrum ac metus eu, rhoncus condimentum enim. Nulla ex quam, vehicula vel mauris eu, tincidunt vestibulum magna. Curabitur hendrerit elit in justo interdum facilisis. Vivamus fringilla cursus justo, vitae porttitor tellus vulputate euismod. Proin laoreet faucibus finibus. In sit amet commodo ex. Sed ut sollicitudin velit, quis ultricies justo. Pellentesque sollicitudin dignissim malesuada. Duis egestas hendrerit tellus, eget lacinia elit rutrum at. Aliquam ullamcorper laoreet nisl. Integer est dui, hendrerit non massa rhoncus, vulputate ultricies dolor. Nullam vel enim quis mauris condimentum tincidunt nec sed odio. Aliquam ultricies consectetur lorem. </p>
</div>
<div class="scroller">
<a name="item-02" class="heading anchor-point"></a>
<p> Nunc ultrices eget sem ut blandit. Etiam tempor ultricies pellentesque. Ut orci quam, rutrum ac metus eu, rhoncus condimentum enim. Nulla ex quam, vehicula vel mauris eu, tincidunt vestibulum magna. Curabitur hendrerit elit in justo interdum facilisis. Vivamus fringilla cursus justo, vitae porttitor tellus vulputate euismod. Proin laoreet faucibus finibus. In sit amet commodo ex. Sed ut sollicitudin velit, quis ultricies justo. Pellentesque sollicitudin dignissim malesuada. Duis egestas hendrerit tellus, eget lacinia elit rutrum at. Aliquam ullamcorper laoreet nisl. Integer est dui, hendrerit non massa rhoncus, vulputate ultricies dolor. Nullam vel enim quis mauris condimentum tincidunt nec sed odio. Aliquam ultricies consectetur lorem. </p>
</div>
<div class="scroller">
<a name="item-03" class="heading anchor-point"></a>
<p> Nunc ultrices eget sem ut blandit. Etiam tempor ultricies pellentesque. Ut orci quam, rutrum ac metus eu, rhoncus condimentum enim. Nulla ex quam, vehicula vel mauris eu, tincidunt vestibulum magna. Curabitur hendrerit elit in justo interdum facilisis. Vivamus fringilla cursus justo, vitae porttitor tellus vulputate euismod. Proin laoreet faucibus finibus. In sit amet commodo ex. Sed ut sollicitudin velit, quis ultricies justo. Pellentesque sollicitudin dignissim malesuada. Duis egestas hendrerit tellus, eget lacinia elit rutrum at. Aliquam ullamcorper laoreet nisl. Integer est dui, hendrerit non massa rhoncus, vulputate ultricies dolor. Nullam vel enim quis mauris condimentum tincidunt nec sed odio. Aliquam ultricies consectetur lorem. </p>
</div>
$('.anchor-point').waypoint(
var loc = this;
function(){
$('.side-bar li').removeClass('active');
$(loc).addClass('testing');
alert('x');
}
);
Try this .. i think $(this) is not able to get the dom element.