bug in firefox and internet explorer with jquery fixed header

Question

Hey fellow developers,

I have been working on a fixed header that snaps into place with a top fixed header on scroll.

it works on chrome, but doesnt work on interent explorer or firefox.

Any help would be great.

http://jsfiddle.net/j08691/f95sW/4/

var offset = $(".sticky-header").offset();
var sticky = document.getElementById("sticky-header")
var additionalPixels = 50;

$(window).scroll(function () {
    if ($('body').scrollTop() > offset.top - additionalPixels) {
        $('.sticky-header').addClass('fixed');
    } else {
        $('.sticky-header').removeClass('fixed');
    }
}); 

Answer 1

The issue here is $('body').scrollTop() use $(this).scrollTop() i.e $(window).scrollTop()

$(window).scroll(function () {

    if ($(this).scrollTop() > offset.top - additionalPixels) {
        $('.sticky-header').addClass('fixed');
    } else {
        $('.sticky-header').removeClass('fixed');
    }
});

DEMO

Answer 2

the issue is $('body').scrollTop()

simply replace $('body').scrollTop() with $(document).scrollTop()

Here is a demo