fadein on top of div on mobile using normal jquery.js

fadein on top of div on mobile using normal jquery.js

Hello,

I just started out with jQuery and i encounter a problem when using jQuery normal when looking at the site from a iPhone. When i scroll down, the div thats fadein only shows when passing the bottom of the div. i woould like the div to show when the top is reached. 
This is my code:
  1. <script>
    $(document).ready(function () {
        /* Every time the window is scrolled ... */
        $(window).scroll( function(){
            /* Check the location of each desired element */
            $('.box').each( function(i){
                var bottom_of_object = $(this).position().top + $(this).scrollTop();
                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':'0.6'},500);
                }
            }); 
        });
    });
    </script> 

i tried outer and inner too instead of scrollTop, all do not give me the disired effect. please assist.

Thanks in advance.


Greets,


Ignotus.