Check if full div is available to user

Question

Is there a way to check if the divuser is fully displayed ? I mean, the scroll bar is positioned so that everything divfits inside the viewport.

Answer 1

This is exactly what was created for: http://www.appelsiini.net/projects/viewport

Answer 2

You need to check the positions for the scroll bar and the corresponding div and compare them in the event handler scroll:

$(window).scroll(function() {
    var top = $(window).scrollTop();
    var bottom = top + $(window).height();
    var dtop = $('#mydiv').position().top;
    var dbottom = dtop + $('#mydiv').height();

    if (dtop>=top && dbottom<=bottom) {
        alert('okay!');
    }
});

http://jsfiddle.net/mblase75/dMwMb/