Search code examples
jquerypluginsjquery-waypoints

jquery waypoint plugin does not work properly

In my code does not work $(this) in jquery waypoint function,without $(this) everything works

<script>
    $('.team-member').waypoint(function (){
        $(this).addClass('bgr');
    }, {
        offset: '70%'
    });
</script>

сss

.bgr {
  background: red;
}

Any ideas?

Solution

  • The flexible way to work Waypont plugin is to do so

    var waypoint = new Waypoint({
  element: document.getElementById('waypoint'),
  handler: function(direction) {
    console.log('Scrolled to waypoint!')
  }
})

    Also you can try this one

    $('.team-member').waypoint(function (){
  var thisE = $(this)[0]['element'];
  $(thisE).addClass('bgr');
  }, {
    offset: '70%'
});

    In your case $(this) refers to waypoint object not to specific dom element thats why your code brakes.Console log $(this) and you will see.

    $('.team-member').waypoint(function (){
    console.log( $(this) )
}, {
    offset: '70%'
});