jQuery $(window).scroll and Internet Explorer (8-9)

Question

http://jsfiddle.net/CbL7W/ example of scroll event behavior.

I have this script that is working correctly in both Chrome and Firefox.

var stickyNavigationOffsetTop = $('.top-nav').offset().top;
var stickyNavigation = function () {
    var scrollTop = $(window).scrollTop();
    if (scrollTop > stickyNavigationOffsetTop) {
        $('.top-nav').css({ 'position': 'fixed', 'top': 0, 'left': 0, 'opacity': .8 });
    } else {
        $('.top-nav').css({ 'position': 'relative', 'opacity': 1 });
    }
};
stickyNavigation();
$(window).scroll(function () {
    stickyNavigation();
});

But there is a little problem with Internet Explorer: On the same page I have that script I have a link with a script that hides a div, when this happens sometimes the page completely scrolls back to the top of the page, but IE is not firing $(window).scroll when that happens.

Screenshot of the issue when page goes back to top.

Chrome (OK): http://i.stack.imgur.com/6WJx7.jpg

IE (Wrong): http://i.stack.imgur.com/CXbKk.jpg

Solution 1

I have the same issue, and as much as I dislike it, my work-around is to trigger the window.scroll event when I show/hide the div. $(window).trigger('scroll');

Solution 2

See this answer on this article

I think changing

$(window).scrollTop() to 
$(document).scrollTop() 

may resolve the IE issue.