How to detect when certain div is out of view

Question

I just saw something very interesting in vk.com

Basically in profile page the right column is changing its width when the left column is gone of the view.

Example : http://vk.com/durov

Just scroll down a little bit to see it.

Answer 1

Every element in the DOM defines certain spatial offset properties that can be accessed from JavaScript, them being offsetTop, offsetLeft etc. which give you the value how much offset it has from its parent. You can also access the parent in question with a while loop which simply assigns the next parent until none are left ( you can add their offsets to the variables of the original offset to gain the "true" (x,y) offset) and the while loop exists when there are no more parent elements.

Then you do some simple logic to check whether or not it is located within the viewport (hint - use the page offset and width/height properties of the window object). Is this enough to go on or do you need a code sample?

You could do some hacks if you know where exactly your element will appear and its height (width is really of no consequence here), but that's a brute force approach. Simply checking the page Y offset and height against the predetermined "maxY" of the element you're trying to get offscreen to display a certain div to the right (like in the example given).

ADDENDUM: (Even more to the point)

This checks whether ANY part of the element is visible in the viewport:

function isVisibleInViewport(elem)
{
    var y = elem.offsetTop;
    var height = elem.offsetHeight;

    while ( elem = elem.offsetParent )
        y += elem.offsetTop;

    var maxHeight = y + height;
    var isVisible = ( y < ( window.pageYOffset + window.innerHeight ) ) && ( maxHeight >= window.pageYOffset );
    return isVisible; 

}

I tried writing it with clarity in mind. You can shorten it further if you wish. Even expand it to include logic if you wish to move to the side (x-axis, offsetLeft variable). And changes to your logic ought to be minimal if you want to check whether it's completely within view ( can't see a reason though).

My example usage

The logic to govern when to call this function goes beyond the scope of this, I hope you have some method in mind. My example:

function check()
{
    var canvas = document.getElementById("webGlExperiments");
    if(isVisibleInViewport(canvas))
        document.getElementById("test").innerHTML = "It is!";
    else
        document.getElementById("test").innerHTML = "It is not!";
}

And then add an event listener to check for scrolls:

window.addEventListener("scroll", check, false);

For my example, you'll also need another element like a canvas with the id webGlExperiments, change it to something that suits you and your problem. This is the div in question I used in my test which you can adapt for yourself:

<div id="test" style="margin-top:100px;">Testing, testing!</div>