Snippet / Theme Options > Integration for JavaScript and Theme Options > Custom CSS for styles

Sticky Header on Scroll

Adds a sticky class after the visitor scrolls down the page, then applies a translucent background and shadow to the header.

Use this only when Divi’s native sticky controls cannot cover the design. Add dfy-site-header to the header section or menu wrapper, then load the JavaScript site-wide.

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var header = document.querySelector(".dfy-site-header");
    if (!header) return;

    function updateHeader() {
      header.classList.toggle("is-stuck", window.scrollY > 100);
    }

    updateHeader();
    window.addEventListener("scroll", updateHeader, { passive: true });
  });
</script>

.dfy-site-header {
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.dfy-site-header.is-stuck {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 30px rgba(20, 28, 38, 0.16);
  backdrop-filter: blur(10px);
}

Notes

• Prefer Divi 5 sticky settings when they meet the requirement.
• Keep the selector custom so the snippet does not accidentally target every menu module.
• Test logged-in WordPress admin bar spacing.

Sources

• https://www.cobalt.graphics/divi-css-snippets/
• https://wpzone.co/blog/snippet_tag/divi-menu/