A small plugin for jQuery, by Sam Sehnert, that checks whether elements are within the user visible viewport of a web browser.
Only accounts for vertical position, not horizontal.
(function ($) {
/**
* Copyright 2012, Digital Fusion
* Licensed under the MIT license.
* http://teamdf.com/jquery-plugins/license/
*
* @author Sam Sehnert
*/
$.fn.visible = function (partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
To use it:
if ($("#my-element").visible()) {
// The element is within the user visible viewport.
}