Show div as the page scrolls on div height

Question

I am trying to animate(show) a div as the page scrolls to that div's height(animate according to div's height because div height is variable since my layout is responsive so as the page gets smaller div height changes too...)

Because offset() doesn't see hidden elements, I added a div(#box) to be able to get the height of target div (magicBox).

What I have done so far:

$('.magicBox').hide();
var box = $('#box');
var boxPosition = box.offset();
$(window).scroll(function() {
if ($(window).scrollTop() <= boxPosition.top) {
   $('.magicBox').show('slow');
}
});

It doesn't work! what is wrong here? http://jsfiddle.net/6hq3V/

I updated it! I am almost there with scrollTop but it doesn't still appear as the page on #box height..

Answer 1

if ($(window).scrollTop() == boxPosition.top) {
    $('.magicBox').show('slow');
}

$(document).height() was constant and so it couldn't fire anything while .scrollTop() give you the scrollBar position.

http://jsfiddle.net/6hq3V/1