Q:

Display an element when 50% of its height reaches the bottom of the screen

I'm using Timothy Aaron's code to display elements one by one while scrolling down.
It works well, but elements become visible only when their bottom is reached (which is causing issues for DIVs with significant height as people scroll down a white page for a while...). What should I modify in the code to have the opacity: 1 applied already when 50% is reached (I mean 50% of the height of the element)? I tried if( bottom_of_window > ( bottom_of_object / 2 )  ){ and if( bottom_of_window > ( bottom_of_object - 50% )  ){ but both without success. See JSFiddle: http://jsfiddle.net/mGdkj/
Many thanks,
$(document).ready(function() {

    /* Hide all elements outside the visible window */
    $('body *').each( function(){

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

        if( bottom_of_window < top_of_object  ){

            $(this).addClass('hide').css({'opacity':'0'});

        }

    });

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

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

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

                if( bottom_of_window > ( bottom_of_object + 20 )  ){

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

                }

        }); 

    });

});

A:

Try This: 
$(window).scroll( function(){

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

        var bottom_of_object = $(this).position().top + $(this).outerHeight() / 2;/*here is the change*/
        var bottom_of_window = $(window).scrollTop() + $(window).height();

            if( bottom_of_window > ( bottom_of_object + 20 )  ){

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

            }

    }); 

});

