Sticky Header - How Do I Make It Hide/Show on Scroll?

[AngusE]

Hey guys,

I am using instapage and have the following javascript and css to make the header sticky which works great. I am just wanting the header though to hide when scrolling down the page but to reappear if the user scrolls up with a transition effect at 0.3 seconds. Can anyone help me with adding in the right code to make this happen, I have no idea haha, thank you!

My current code on instapage:

Javascript:

<!-- Begin "Sticky Header" || Help center -->
<!-- Insert in Settings->Javascript->Footer -->
<!-- CS:20201028-12-1 -->
<script data-cfasync="false">
document.addEventListener('DOMContentLoaded', stickyHeader);
window.addEventListener( 'resize', stickyHeader );

function stickyHeader() {
var header = window.__page_generator ? document.querySelector('.section') : document.querySelector('.page-block');
var headerHeight = header.clientHeight;
header.classList.add("sticky-header");
document.querySelector('body').style.marginTop = headerHeight + 'px';
}
</script>
<!-- End "Sticky Header" || Help center -->



CSS:

<!-- Begin "Sticky Header" || Help center -->
<!-- Insert in Settings->HTML/CSS->Head -->
<!-- CS:20200120-12-2 -->
<style>
.sticky-header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1000000;
}
</style>
<!-- End "Sticky Header" || Help center -->




Code that I know I need to use somehow to make the header hide/show on scrolls:

I know I have to somehow incorporate this following java code but I just don't know how to edit it for use on my page as Im not sure that "navbar" is applicable rather than "sticky header" and not sure how the event listener comes into play:

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}