Is there a way to check whether the div is entirely visible to the user? I mean the scroll bar is positioned so that the entire div fits inside the viewport.

Is there a way to check whether the div is entirely visible to the user? I mean the scroll bar is positioned so that the entire div fits inside the viewport.

• javascript
• jquery

Share Improve this question Follow edited Dec 21, 2011 at 20:32 Lightness Races in Orbit 386k7777 gold badges666666 silver badges1.1k1.1k bronze badges asked Dec 21, 2011 at 20:22 keepwalkingkeepwalking 2,65466 gold badges3232 silver badges6464 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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

You need to check positions for the scrollbar and the div in question, and pare them in the scroll event handler:

$(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/mblase75/dMwMb/