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

I don't think any scrolling should occur when the page gets shorter. You could try changing scrolltop before you remove the div. — Asad Saeeduddin, Dec 14 '12 at 14:56
But why are Chrome and Firefox firing the scroll event? The thing with that div is that is a collapsable section, whe are not actually removing but hiding it. — Tebo, Dec 14 '12 at 15:42
In my case (OP's could be different) Chrome and Firefox fire the scroll event because hiding the div causes the scroll bar to be removed from the window. This means that the scroll position has changed back to 0 by default, which I'd say constitutes a scroll event. — Walter Stabosz, Jan 21 '13 at 16:33

score 2 · Accepted Answer · answered Jan 21 '13 at 16:28

2

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');

answered Jan 21 '13 at 16:28

Walter Stabosz

6,988
4
40
69

It kinda work hehe... mixed with jquery delay as seen on http://blog.project-sierra.de/archives/1559 it's a good workaround. IE is still a little buggy with this solution so our final call was to remove this sticky navigation feature. Thanks anyway for the solution! – Tebo Jan 28 '13 at 20:13
This solution worked perfectly for my issue with IE not firing the scrolling event when a href would pop the page to the top, even though it works fine in modern browsers. – tokyovariable Dec 25 '13 at 02:21

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

See this answer on this article

I think changing

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

may resolve the IE issue.

edited May 23 '17 at 12:05

Community

1
1

answered Dec 14 '12 at 15:19

marty

466
5
18

Well sorry about that, do you have a dev page where this can be accessed? – marty Dec 20 '12 at 20:51

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

2 Answers2

Linked