# 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.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: header, sticky, scroll, mobile
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-hide-header-on-scroll/

## Code

```html
<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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Hide the Header on Scroll Down, Show It on Scroll Up" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/