Only apply shadow and other styles to sticky headers on scroll, issue #279

src/components/common/BasicScripts.astro

@@ -97,7 +97,7 @@ import { UI } from '~/utils/config';
     });
 
     function appyHeaderStylesOnScroll() {
-      const header = document.getElementById('header');
+      const header = document.querySelector("#header[data-aw-sticky-header]");
       if (lastKnownScrollPosition > 60 && !header.classList.contains('scroll')) {
         document.getElementById('header').classList.add('scroll');
       } else if (lastKnownScrollPosition <= 60 && header.classList.contains('scroll')) {

src/components/widgets/Header.astro

@@ -54,6 +54,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
     { sticky: isSticky, relative: !isSticky, dark: isDark },
     "top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out",
   ]}
+  {...isSticky ? { "data-aw-sticky-header":  true } : {}}
   {...id ? { id } : {}}
 >
   <div class="absolute inset-0"></div>