Hide the Header on Scroll Down, Show It on Scroll Up
Slides the sticky site header out of view while visitors scroll down to read and brings it back as soon as they scroll up, giving content more room on small screens.
Opens WPIDE on
Code
<style>
.wpide-autohide{position:sticky;top:0;z-index:999;transition:transform .25s ease;}
.admin-bar .wpide-autohide{top:var(--wp-admin--admin-bar--height,32px);}
.wpide-autohide.is-hidden{transform:translateY(-110%);}
@media (prefers-reduced-motion:reduce){.wpide-autohide{transition:none;}}
</style>
<script>
(function () {
var header = document.querySelector('header.wp-block-template-part, .site-header, #masthead, body > header');
if (!header) { return; }
header.classList.add('wpide-autohide');
var lastY = window.pageYOffset, ticking = false;
function update() {
var y = window.pageYOffset;
var hide = y > lastY && y > header.offsetHeight + 40 && !header.contains(document.activeElement);
header.classList.toggle('is-hidden', hide);
lastY = y;
ticking = false;
}
window.addEventListener('scroll', function () {
if (!ticking) { window.requestAnimationFrame(update); ticking = true; }
}, { passive: true });
})();
</script>Notes
Change the header selector in the script if your theme uses something other than a header element or .site-header.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.