/*CSS*/ #nav__wrapper { transform: translateY(0%); transition: all 0.3s ease-out; } #nav__wrapper.header_hide { transform: translateY(-100%); } /*CSS*/ /*JS*/ const header_el = $("#nav__wrapper"), mywindow = $(window); let mypos = mywindow.scrollTop(), up = !1, newscroll = 0; mywindow.scroll(function () { (newscroll = mywindow.scrollTop()) > mypos && !up ? (header_el.toggleClass("header_hide"), (up = !up)) : newscroll < mypos && up && (header_el.toggleClass("header_hide"), (up = !up)), (mypos = newscroll); }); /*JS*/