Determine if element is on screen

Question

Is there a way to determine if a certain element is currently visible on the user's screen/viewport with the use of jQuery? (not using other external libraries)

Answer 1

Not directly by using default jQuery, but you can implement your own function, which you can use one jQuery elements afterwards:

(function ($) {
    $.fn.isOnScreen = function () {
        var topView = $(window).scrollTop();
        var botView = topView + $(window).height();
        var topElement = this.offset().top;
        var botElement = topElement + this.height();
        return ((botElement <= botView) && (topElement >= topView));
    }
})(jQuery);

After adding this code you can call $('#yourElementId').isOnScreen() which will return true if the whole element is on screen and false if it's not.

You can also play around with it a bit, so it would return true if at least a quarter of the element is visible on screen, for example like this:

(function ($) {
    $.fn.isOnScreen = function () {
        var topView = $(window).scrollTop();
        var botView = topView + $(window).height();
        var topElement = this.offset().top;
        var botElement = topElement + (this.height() / 4); //<---
        return ((botElement <= botView) && (topElement >= topView)); 
    }
})(jQuery);