Är elementet synligt?

Ibland vill man veta om ett element är synligt i viewporten på en webbsida. Det kan vara så att man vill köra ett script när ett element blir synligt eller att man vill docka ett element vid ett annat.

Följande kodsnutt (som använder JQuery) gör det enkelt att se om ett element är helt eller delvis synligt när man scrollar.

var element         = $("#element");
var topOfElement    = element.offset().top;
var bottomOfElement = element.offset().top + element.outerHeight(true);

$(window).bind('scroll', function() {

    var scrollTopPosition   = $(window).scrollTop()+$(window).height();
    var windowScrollTop     = $(window).scrollTop()

    if( windowScrollTop > topOfElement && windowScrollTop < bottomOfElement) {
       // Element is partially visible (above viewable area)
       console.log("Element is partially visible (above viewable area)");

    }else if( windowScrollTop > bottomOfElement && windowScrollTop > topOfElement ) {
        // Element is hidden (above viewable area)
       console.log("Element is hidden (above viewable area)");

    }else if( scrollTopPosition < topOfElement && scrollTopPosition < bottomOfElement ) {
        // Element is hidden (below viewable area)
        console.log("Element is hidden (below viewable area)");

    }else if( scrollTopPosition < bottomOfElement && scrollTopPosition > topOfElement ) {
        // Element is partially visible (below viewable area)
        console.log("Element is partially visible (below viewable area)");

    }else{
        // Element is completely visible
        console.log("Element is completely visible");
    }
});