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 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');
See this answer on this article
I think changing
$(window).scrollTop() to
$(document).scrollTop()
may resolve the IE issue.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With