<!-- BEGIN COPY / PASTE -->
    <header class="sticky top-0 bg-white transition-colors duration-300" id="header">
      <div class="p-4">
        <h1 class="text-xl font-bold">My Sticky Header</h1>
      </div>
    </header>
    <script>
      window.addEventListener('scroll', function() {
        const header = document.getElementById('header');
        if (window.scrollY > 50) {
          header.classList.add('bg-blue-500');
          header.classList.remove('bg-white');
        } else {
          header.classList.add('bg-white');
          header.classList.remove('bg-blue-500');
        }
      });
    </script>
    <!-- END COPY / PASTE -->