Why is jQuery waypoints not working?

Question

I have this:

<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.waypoints.js"></script>

This:

.icon {
  text-decoration: none;
  border-bottom: none;
  position: relative; /*puede ser acá */
  opacity: 0.5;
}

This other thing:

.icon-animate {
    opacity: 1;
}

And finally this:

var $first = $('.icon');

$first.waypoint(function (){
    $first.addClass('icon-animate');
});

The files are named correctly and they belong to the correct folder. Why isn't it working?

Answer 1

The proper way to write functions with waypoint would be the following:

$first.waypoint(function(direction) {
    $first.addClass('icon-animate');
});

You can then specify options:

// hit the top of your element when scrolling up
$first.waypoint(function(direction) {
    if (direction == 'up') { // hit the top of your element when scrolling up
        $first.addClass('icon-animate');
    }
});

// hit the top of your element when scrolling down
$first.waypoint(function(direction) {
    if (direction == 'down') { // hit the top of your element when scrolling down
        $first.addClass('icon-animate');
    }
});

// hit the bottom of your element when scrolling up
$first.waypoint(function(direction) {
    if (direction == 'up') { 
        $first.addClass('icon-animate');
    }
}, { offset: function() { return ((-$(this).height() + $("body").height())) } });

// hit the bottom of your element when scrolling down
$first.waypoint(function(direction) {
    if (direction == 'down') { 
        $first.addClass('icon-animate');
    }
}, { offset: function() { return ((-$(this).height() + $("body").height())) } });

Answer 2

Please remove one of waypoints js files. It cannot include both.

<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.waypoints.js"></script>