[Oxygen 6] - Create sticky header after scrolling X px

readme.md

Sticky Header (Delayed Reveal)

This snippet creates a header that becomes fixed and slides down after the page has been scrolled.

What it does

• The header behaves normally at the top of the page.
• After scrolling past a defined distance, it becomes fixed.
• It slides down from the top and remains visible while scrolling.
• The header automatically accounts for the WordPress admin bar when logged in.

What you need to update

1. Header selector

Update the selector so it targets your header element.

Current selector:

.bde-header-builder-89-121

This number will be different on other sites.

Look at your header markup. For example:

<header class="bde-header-builder-123-456 ...">

Then update all selectors in both the JS and CSS to match:

.bde-header-builder-123-456

Make sure you update every occurrence.

2. Scroll trigger distance

In the JavaScript you will see:

window.scrollY > 100

Change 100 to adjust when the header becomes sticky.

Examples:

Header appears sooner:

window.scrollY > 50

Header appears later:

window.scrollY > 200

3. Header background colour

In the CSS file you will see:

background-color: purple;

Change this to match your design.

Example:

background-color: #ffffff;

4. Z-index (optional)

If the header appears behind other elements, increase:

z-index: 999999;

In most cases this will not need to change.

WordPress admin bar

No changes are required.

The header automatically offsets itself using the WordPress variable:

--wp-admin--admin-bar--height

This ensures the header sits correctly below the admin bar when logged in.

Summary

As a minimum, you need to update:

1. The header selector (.bde-header-builder-XX-XXX)
2. The scroll trigger value (100)
3. The background colour

sticky.css

.breakdance .bde-header-builder.bde-header-builder-89-121 {
  transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
}

.breakdance .bde-header-builder.bde-header-builder-89-121.sticky-ready {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999999;
  transform: translateY(-100%);
  opacity: 0;
  background-color: purple;
}

.breakdance .bde-header-builder.bde-header-builder-89-121.sticky-ready.sticky-show {
  transform: translateY(0);
  opacity: 1;
}

.admin-bar .breakdance .bde-header-builder.bde-header-builder-89-121.sticky-ready {
  top: var(--wp-admin--admin-bar--height);
}

sticky.js

// Update the class "bde-header-builder-89-121" on line 4 to the class of your Header
// Update the "scrollY" value on line 11 to set the scroll distance before the sticky header shows

const header = document.querySelector('.bde-header-builder-89-121');

if (!header) return;

let isActive = false;

function handleScroll() {
  if (window.scrollY > 100) {
    if (!isActive) {
      header.classList.add('sticky-ready');

      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          header.classList.add('sticky-show');
        });
      });

      isActive = true;
    }
  } else {
    header.classList.remove('sticky-show');
    header.classList.remove('sticky-ready');
    isActive = false;
  }
}

window.addEventListener('scroll', handleScroll, { passive: true });
handleScroll();