Question

I’m currently using jQuery.appear to change the class of elements as they come into the viewport. The plugin works great, except that it fires right as the top of the element comes into view. I am wanting to adapt it so it only fires when the entire element is inside the viewport, or near to being.

CODE:

$('someselector').appear();
$('someselector').on('appear', function() {
    $(this).removeClass('on').addClass('off');
    $(this).siblings().removeClass('off').addClass('on');
});

Answer 1

jQuery Waypoints plugin could be useful also. It triggers an action, when the element became to be visible on the screen.

$('.entry').waypoint(function() {
   alert('The element is appeared on the screen.');
});

There are some examples on the site of the plugin.