Hide Sticky Header when the Footer Appears - Code Snippet

[@christianlecuyer6380]

Awesome tip! :)

[@QuaverloveStudio]

Boom!

[@dragon3602010]

Great, thanks and can you show us how to hide the header when we scroll down and show it when we scroll up to make more space on mobile more particular thanks 👍🏼

[@websquadron]

Yup I’ve got videos on show and hide based on scroll

[@oengenheiroporassinatura]

This is literally what I was trying to accomplish in my website last week. Where did I sign authorizing you to read my mind?

[@keysncoffee7733]

I swear this guy’s got cookies on our minds once we watched a video of his 😂

[@websquadron]

:) :)

[@dansk9963]

Thanks mate. Any way to make the disappearance and reappearance a bit more smooth? For example slide up/down?

[@educationforever314]

Smooth Header Transition

.Hex {
transition: opacity 0.5s, visibility 0.5s;
opacity: 1;
visibility: visible;
}
.Hex.hidden {
opacity: 0;
visibility: hidden;
}

Header Content

Footer Content

document.addEventListener('DOMContentLoaded', function() {
// Get the header and footer elements
const header = document.querySelector('.Hex');
const footer = document.querySelector('.Fex');
// Create an intersection observer
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Footer is in view, hide the header smoothly
header.classList.add('hidden');
} else {
// Footer is not in view, show the header smoothly
header.classList.remove('hidden');
}
});
}, { threshold: 0 });
// Start observing the footer
observer.observe(footer);
});

[@educationforever314]

I hope this will be helpful

[@abhyaskhanal]

Please video on pricing table with Plus, Minus button and price change according to quantity for monthly and yearly with some discount in yearly tab.

[@HoaLe-uq1pl]

Your video is really fascinating.
But how about when I have multiple sections in the header? I added CSS Classes to all sections in header but its layout turn to be chaos.

[@websquadron]

Difficult to be sure without working on your site.

[@SmileyJack.]

Footer: repeats header
Don’t Repeat Yourself (DRY) principle: Am I a joke to you?

[@websquadron]

What what what what what what what what what what what what what what what what what???????!?