On this page http://eisenpar.com/chocolate/index-free.html I've tried to create an effect: if you are at the top of the page and make a scroll, page scrolls on the window height and a fixed navigation appears. It works properly in Chrome, Opera and Edge (I haven't tested in Safari yet), but in Firefox and IE11 this effect crashes: it scrolls to bottom and then - to the top without any pause. In IE it shows navigation, in FF it doesn't, just sends me to the top of the page.
Here is my script for this effect:
var scrollBool = false;
jQuery(window).scroll(function() {
var winHeight = window.innerHeight;
navHeight = jQuery('nav').outerHeight();
if (scrollBool == false) {
scrollBool = true;
if(jQuery('nav').hasClass('fixed')) {
if (jQuery('body').scrollTop() + 10 < winHeight) {
jQuery('nav').removeClass('fixed');
jQuery("html, body").stop().animate({
scrollTop: jQuery('header').offset().top
}, 700, function() {
scrollBool = false;
});
} else {
scrollBool = false;
}
} else {
if (jQuery('body').scrollTop() < winHeight) {
if(jQuery('nav a, .link-block a').hasClass('in-scroll')) {
} else {
jQuery("html, body").stop().animate({
scrollTop: jQuery('header').offset().top + winHeight
}, 700, function() {
scrollBool = false;
jQuery('nav').addClass('fixed');
});
}
} else {
scrollBool = false;
}
}
}
});
Finally - fixed. FF has issues with jQuery('body').scrollTop()
, it doesn't understand it properly, everything is fixed if I change this to jQuery(window).scrollTop()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.