fade in divs whenever user get to bottom - offset

[klemme]

Hi all,

I have a problem with my code below. It works in chrome, but acts different in IE, and sometimes FF.

Im aiming to load in divs whenever the user scrolls to 220px from the bottom. Basically, I tjeck to see if the distance from the bottom < specified amount, and then load another div from an ajax request.

Issue:
Sometimes in IE the function gets fired twice, so instead of one extra loaded div, i get two at the same time, which i dont want..

Here is my JS/Jquery:

$( document ).ready( function() 
{
    if( typeof( Storage ) !== "undefined" ) // Tjek support for localStorage
    {
        localStorage.initOffset     = 2;    // Hvor i tabellen der skal startes fra ( 2 * 8 = 16 )      
        localStorage.limitClause    = 8;    // Antal produkter der skal indlæses pr. gang

        $( window ).scroll( function()      // Start funktion når der scrolles på siden
        {                       
            // if( $( window ).scrollTop() + $( window ).height() == $( document ).height() )   // Hvis der er scrollet til bunden af siden
            if( $( window ).scrollTop() + $( window ).height() > $(document).height() - 220 )   // Hvis derer scrollet til 180px fra bunden
            {           

                localStorage.initOffset ++;                                                     // Increment initOffset                         
                localStorage.limitTo    = localStorage.initOffset * localStorage.limitClause;   // Afgræns op til
                localStorage.limitFrom  = localStorage.limitTo - localStorage.limitClause;      // Udtræk fra

                var queryString         = location.search.substring( 1 );                       // Querystring fra url, uden: ?


                // Ajax kald der henter flere produkter
                $.ajax({
                        url:        "ajax/udskrivProdukter.php",
                        cache:      false,
                        data:       { 
                                        from            : localStorage.limitFrom,
                                        to              : localStorage.limitTo,
                                        query_string    : queryString
                                    },
                        type:       'GET',
                        success:    function( result )
                                    {
                                        var html = result;      

                                        $( '#main_content_container' ).append( html );
                                        $( '.appender' ).fadeTo( 500, 1 );                                      
                                    },
                        error:      function( xhr, status, error )
                                    {
                                        $( '#sub_menu_content_div' ).html( '<p style="color:#333;">Fejl i AJAX kaldet...</p>' );  
                                    }                           
                    }); // Ajax slut


            }
        });
    }
});

Anyone sees why this is happening? Something with the function inside the scroll event that gets fires a bit out of my control :-/

Looking forward to hear from you!
Regards, Klemme