CODEWITHSUNDEEP
jqueryinternet-explorerscroll
Tebo
Tebo

Reputation: 445

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

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): https://i.sstatic.net/6WJx7.jpg

IE (Wrong): https://i.sstatic.net/CXbKk.jpg

Upvotes: 6

Views: 13524

Answers (2)

Walter Stabosz
Walter Stabosz

Reputation: 7735

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

Upvotes: 2

marty
marty

Reputation: 484

See this answer on this article

I think changing 

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

may resolve the IE issue.

Upvotes: 1

Related Questions