Q:

jQuery Top of Object Fade In

I have this code which fades in a div when it is scrolled into view, however it only fades the div in when the whole div is in the viewport. 
Is there any way to make it run the fade as soon as the middle of the div comes into the viewport?
 <script>
$(document).ready(function() {

    /* Every time the window is scrolled ... */
    $(window).scroll( function(){

        /* Check the location of each desired element */
        $('.hideme').each( function(i){

            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){

                $(this).animate({'opacity':'1'},500);

            }

        }); 

    });

});
</script>

A:

I think just adding half the height of the div would work:
var bottom_of_object = $(this).position().top + ( $(this).outerHeight() / 2 );

To get middle of div instead of bottom. You may want to rename your variables of course.

