How to check if element is visible after scrolling?

function isScrolledIntoView(el) {

    var rect = el.getBoundingClientRect();

    var elemTop = rect.top;

    var elemBottom = rect.bottom;



    // Only completely visible elements return true:

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);

    // Partially visible elements return true:

    //isVisible = elemTop < window.innerHeight && elemBottom >= 0;

    return isVisible;

}

3 years ago

The best method I have found so far is the jQuery appear plugin. Works like a charm.
Mimics a custom "appear" event, which fires when an element scrolls into view or otherwise becomes visible to the user.

$('#foo').appear(function() {

  $(this).text('Hello world');

});

This plugin can be used to prevent unnecessary requests for content that's hidden or outside the viewable area.

3 years ago