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
See this answer on this article
I think changing
may resolve the IE issue.
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');