Bug In Firefox And Internet Explorer With Jquery Fixed Header

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 f

Solution 1:

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

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

Here is a demo

Solution 2:

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