This is a simple jQuery plugin that makes it easy to track the visibility of a set of elements on page. In this context, we are not referring to the HTML visible attribute. Instead what this tracks is how elements go in and out of the viewport as a user scrolls up and down a page. As the user scrolls down the page, a given element will become partially viewable, then fully viewable, then partially viewable again, and finally is no longer visible.
jQuery(document).ready(function(){
var pEls = document.getElementsByTagName('p');
jQuery(pEls).bind('visibility-status-change',
function(evt, visibilityStatus) {
if (visibilityStatus.isLastVisible()) {
jQuery(evt.target).addClass('lastVisible');
} else {
jQuery(evt.target).removeClass('lastVisible');
}
}
);
new VisibilityTracker(pEls);
});
The visibility status of an element is communicated using events. Simply listen for the 'visibility-status-changed' event on a tracked element and your callback will be notified of all changes. The callback will be passed an instance of VisiblityStatus which has the following methods:
And here are examples of each of these statuses: