javascript doesn't work in firefox

Question

JavaScript:

$(window).scroll(function(){
    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
        $('#footer').show();
    }
});

CSS:

#footer {
    display: none;
}

This is supposed to reveal a hidden div at the bottom of a page when scrolled all of the way down to the bottom. For some reason, the hidden div never gets shown in Firefox. Is there another method using jQuery to create the same effect?

EDIT: Here's the page where it's not working correctly in Firefox

http://safe.tumblr.com/theme/preview/34069

Answer 1

You need to be using this:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $('#footer').show();
   }
});

Answer 2

There may be a small difference between the max value for scrollTop and what documentHeight - windowHeight gives you, so I would propose to subtract a small safety factor:

$(window).scroll(function(){
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 3) {
        $('#footer').show();
    }
});