Self contained sticky-header, don't rely on wrapper classname

Author: jaredkc

assets/base.css

@@ -369,14 +369,15 @@ pre {
 /**
  * Header
  */
-.section-header {
-  background-color: #fff;
-  top: 0;
-  z-index: 10;
+sticky-header {
+  display: block;
 }
 
 .sticky-header-hidden,
 .sticky-header-stuck {
+  position: sticky;
+  top: 0;
+  z-index: 10;
   transition: all var(--duration-medium) ease-out;
 }
 

assets/global.js

@@ -104,12 +104,10 @@ class StickyHeader extends HTMLElement {
 
   connectedCallback() {
     this.header =
-      this.querySelector('.section-header') ||
-      this.closest('.section-header') ||
-      document.querySelector('.section-header');
+      this.querySelector('[data-sticky-header-target]') || this.firstElementChild;
 
     if (!this.header) {
-      console.warn('StickyHeader: .section-header element not found.');
+      console.warn('StickyHeader: no sticky target found inside the component.');
       return;
     }
 

sections/header.liquid

@@ -1,6 +1,6 @@
 {% render 'search-dialog-modal' %}
 <sticky-header>
-  <header class="flex justify-between items-center px-4 py-2 text-center border-b md:py-4 md:px-8">
+  <header data-sticky-header-target class="flex justify-between items-center px-4 py-2 text-center border-b md:py-4 md:px-8 bg-white">
     {%- if template.name == 'index' -%}
       <h1 class="m-0 text-base" itemscope itemtype="http://schema.org/Organization">
     {%- else -%}
@@ -67,7 +67,6 @@
 {% schema %}
 {
   "name": "Header",
-  "class": "section-header",
   "settings": [
     {
       "type": "link_list",