/*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*/
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter