| Меню, выдвигающееся при скролле вверх, скрывающееся при скролле вниз реализовано тут https://rosomahaboat.ru/ и https://nanocad.com/ идея взята тут https://www.mercedes-benz.com/en/ |
let scroll = 0;
let scrollCurrent = 0;
let scrollAction = 'down';
$(window).on("scroll", function(){
if(this.scrollY>scrollCurrent){//крутим вниз
if(scrollAction == 'down'){
if(this.scrollY > scroll+10){
$("header.header").removeClass("header--showNav");
scroll = this.scrollY;
}
}
else{
scrollAction = 'down';
scroll = this.scrollY;
}
}
else{ //крутим вверх
if(scrollAction == 'up'){
if(this.scrollY < scroll-100){
$("header.header").addClass("header--showNav");
scroll = this.scrollY;
}
}
else{
scrollAction = 'up';
scroll = this.scrollY;
}
}
scrollCurrent = this.scrollY;
});
|
$(window).on("scroll", throttle(createHeaderAnimation, 500));
let throttle = (func, limit) => {
let lastFunc;
let lastRan;
return function() {
let context = this;
let args = arguments;
if (!lastRan) {
func.apply(context, args);
lastRan = Date.now();
}
else {
clearTimeout(lastFunc);
lastFunc = setTimeout(function() {
if ((Date.now() - lastRan) >= limit) {
func.apply(context, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
}
}; |