How to Hide the Header Initially and Show It After Scrolling Down in Bricks

In our Facebook group a user asked:

I wonder if there is a tutorial on making the header appear after the user has scrolled down a little? Like the opposite of Headroom.

This Pro tutorial provides the steps to hide the header in Bricks when the scroll position is at the top and reveal it after the user scrolls down a certain number of pixels.

Step 1

Add the following CSS:

#brx-header {
	background-color: #fff;
	z-index: 2;
	transform: translateY(-100px);
	position: fixed;
	transition: transform 0.3s ease-out;
	box-shadow: 0 0 20px rgba(0,0,0,0.15);
}

#brx-header.visible {
	transform: translateY(0);
}

Change #fff to your desired header background color.

To begin with, we are positioning the header 100px (adjust as needed) off the screen from the top. Then defining a visible class to undo that. We shall use JavaScript to toggle this class on and off based on the scroll position.

There are several ways to add custom CSS. My preference is in the child theme’s style.css file.

Step 2

Edit your Header template with Bricks.

Click on the gear icon → PAGE SETTINGS → CUSTOM CODE → Body (footer) scripts.

Paste:

<script>
// Get the header element
const header = document.getElementById('brx-header');

// Set the distance from top to reveal the header
const revealAt = 100;

window.addEventListener('scroll', function() {
  // Check if we've scrolled past the reveal point
  if (window.scrollY > revealAt) {
    // Add the 'visible' class if not present
    if (!header.classList.contains('visible')) {
      header.classList.add('visible');
    }
  } else {
    // Remove the 'visible' class
    header.classList.remove('visible');
  }
});
</script>