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

Joined
Sep 27, 2021
Messages
1
Reaction score
0
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;
}
 
Last edited:

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,763
Messages
2,569,560
Members
45,035
Latest member
HoTaKeDai

Latest Threads

Top