Hide header on scroll down, show on scroll up

Preview demo

Fixed headers are fairly common nowadays with big name brands like Facebook, Twitter, Google, LinkedIn, and others using this pattern. It’s easy to carelessly copy them without any thought to improving on the pattern, but perhaps we should rethink that.

More and more people are using mobile phones where screen real estate is a commodity. Even on desktops and tablets applications that get out of the way and let users focus on content feel better. There’s more room to breathe; your eyes don’t feel like squinting.

How can we improve on the fixed header pattern? Here’s a proposal: hide the header as the user scrolls down, and show it again when the user scrolls up. This is not revolutionary. Other apps and websites are already doing this, and it’s pretty sweet. Here’s how you do it by brizy builder.



The CSS


section.brz-section__header > .brz-section__header--animated.scroll-down:not(.brz-section__header--animated-closed) {
  opacity: 1;
  -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
      transform: translateY(0);
  visibility: visible;
}
section.brz-section__header > .brz-section__header--animated:not(.scroll-down) {
  opacity: 0;
  visibility: hidden;
}


The JavaScript

This content has been hidden.

Please Donate or Complete Survey (advertisement) to unlock free.

<script>
let lastKnownScrollPosition = 0;
let deltaY = 0;
document.addEventListener('scroll', function() {
let ticking = false;
if (!ticking) {
// event throtteling
window.requestAnimationFrame(function() {
deltaY = window.scrollY - lastKnownScrollPosition;
lastKnownScrollPosition = window.scrollY;
console.log('deltaY', deltaY);
if (deltaY < 0) {
document.querySelector("section.brz-section__header > .brz-section__header--animated").classList.add("scroll-down");
} else if (deltaY > 0) {
document.querySelector("section.brz-section__header > .brz-section__header--animated").classList.remove("scroll-down");
}
ticking = false;
});
ticking = true;
}
});
</script>

How to use it

Download file demo.zip, upload to Brizy. Done (Then you can see the css code from here)

  1. Click download demo.zip
  2. To import, go to a page >> click on "add a new block" >> select "saved" tab >> click on "import new block" >> Upload your zip file >> Completed.
  3. Customize to your fancy. Watch the video tutorial here

*Note: License Pro is required for the functions to work

Key word:

Hide header on scroll down, show on scroll up