Make Any Shopify Theme Header Sticky Using JS

1. Copy the class name of that theme header like in this case header class= site-header

2- Go to theme.liquid place this code before </body> tag
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const header = document.querySelector(".site-header");
    const headerHeight = header.offsetHeight;
    // Create placeholder div
    const placeholder = document.createElement("div");
    placeholder.style.height = headerHeight + "px";
    placeholder.style.display = "none"; // Hide initially
    header.parentNode.insertBefore(placeholder, header);
    window.addEventListener("scroll", function () {
      if (window.scrollY > 0) {
        header.style.position = "fixed";
        header.style.top = "0";
        header.style.left = "0";
        header.style.right = "0";
        header.style.zIndex = "1000";
        header.style.backgroundColor = "#fff";
        placeholder.style.display = "block"; // Show placeholder on scroll
      } else {
        header.style.position = "";
        header.style.top = "";
        header.style.left = "";
        header.style.right = "";
        header.style.zIndex = "";
        header.style.backgroundColor = "";
        placeholder.style.display = "none"; // Hide placeholder when back to top
      }
    });
  });
</script>