jQuery- Check if element are within the user visible viewport

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.
}

Leave a Comment

Your email address will not be published. Required fields are marked *