Меню, выдвигающееся при скролле вверх, скрывающееся при скролле вниз реализовано тут 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)); } } }; |