Hide Sticky Header when the Footer Appears - Code Snippet

Hide Sticky Header when the Footer Appears - Code Snippet
Code: www.codesnippe...
Grab our Course and $1 Business Packs: learn.websquad...
Elementor Hosting - managed wordpress hosting :
be.elementor.c...
Elementor Pro - The builder that will make you a pro
be.elementor.c...
Book your 1-2-1 Consultation: learn.websquad...
We love to create - share - respond - and deliver.
Join our Facebook Group: / 3309523509284305
Get Code Snippets Pro: r.freemius.com...

[@christianlecuyer6380]

Awesome tip! :)

[@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]

:) :)

[@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

[@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

[@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???????!?

[@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.

[@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.