refactor(Header): 将Header组件重构为ScrollHeader组件

将Header组件中的滚动逻辑提取到ScrollHeader组件中，以提高代码的可维护性和复用性。同时优化了滚动事件的处理，添加了防抖和初始状态设置。

Author: ExquisiteCore

blog-web/src/components/Header.astro

@@ -1,11 +1,8 @@
 ---
-// Header component with smart scroll behavior
+import ScrollHeader from "../components/solid/ScrollHeader";
 ---
 
-<header 
-  class="fixed top-0 w-full z-50 transition-all duration-300 transform" 
-  id="smart-header"
->
+<ScrollHeader client:load>
     <div class="navbar container mx-auto px-4 h-16">
         <div class="navbar-start">
             <div class="dropdown">
@@ -73,75 +70,4 @@
             <button class="btn btn-primary ml-2">登录</button>
         </div>
     </div>
-</header>
-
-<script>
-  // Get the header element
-  const header = document.getElementById('smart-header');
-  let lastScrollY = 0;
-  let isAtTop = true;
-  
-  // Handle scroll events
-  function handleScroll() {
-    // Safety check in case header element doesn't exist
-    if (!header) return;
-    
-    const currentScrollY = window.scrollY;
-    const scrollDelta = currentScrollY - lastScrollY;
-    
-    // Check if at top of page
-    if (currentScrollY < 10) {
-      isAtTop = true;
-      header.classList.remove('-translate-y-full');
-      header.classList.add('translate-y-0');
-      header.classList.remove('bg-base-100/95', 'backdrop-blur-sm', 'shadow-md');
-      header.classList.add('bg-base-100');
-    } else {
-      if (isAtTop) {
-        isAtTop = false;
-        header.classList.remove('bg-base-100');
-        header.classList.add('bg-base-100/95', 'backdrop-blur-sm', 'shadow-md');
-      }
-      
-      // Ignore small scroll movements to prevent jitter
-      if (Math.abs(scrollDelta) < 5) {
-        lastScrollY = currentScrollY;
-        return;
-      }
-      
-      // Show/hide based on scroll direction
-      if (scrollDelta < 0) {
-        // Scrolling up - show header
-        header.classList.remove('-translate-y-full');
-        header.classList.add('translate-y-0');
-      } else if (currentScrollY > 100) {
-        // Only hide when we've scrolled down a bit
-        header.classList.remove('translate-y-0');
-        header.classList.add('-translate-y-full');
-      }
-    }
-    
-    lastScrollY = currentScrollY;
-  }
-
-  // Add scroll event listener with throttling for better performance
-  let ticking = false;
-  
-  // Only add event listener if header exists
-  if (header) {
-    window.addEventListener('scroll', function() {
-      if (!ticking) {
-        window.requestAnimationFrame(function() {
-          handleScroll();
-          ticking = false;
-        });
-        ticking = true;
-      }
-    });
-    
-    // Initialize header state
-    handleScroll();
-  } else {
-    console.warn('Header element with ID "smart-header" not found');
-  }
-</script>
+</ScrollHeader>

blog-web/src/components/solid/ScrollHeader.jsx

@@ -1,10 +1,11 @@
-import { createSignal, createEffect, onCleanup } from 'solid-js';
+import { createSignal, createEffect, onCleanup, onMount } from "solid-js";
 
 export default function ScrollHeader(props) {
   const [isVisible, setIsVisible] = createSignal(true);
   const [lastScrollY, setLastScrollY] = createSignal(0);
   const [isAtTop, setIsAtTop] = createSignal(true);
-
+  
+  // Handle scroll events with debounce
   const handleScroll = () => {
     const currentScrollY = window.scrollY;
 
@@ -13,38 +14,68 @@ export default function ScrollHeader(props) {
       setIsAtTop(true);
       setIsVisible(true);
     } else {
-      setIsAtTop(false);
+      // Update at-top state if needed
+      if (isAtTop()) {
+        setIsAtTop(false);
+      }
 
-      // Show/hide based on scroll direction
-      if (currentScrollY < lastScrollY()) {
+      // Check scroll direction
+      const isScrollingUp = currentScrollY < lastScrollY();
+      
+      if (isScrollingUp) {
         // Scrolling up - show header
         setIsVisible(true);
-      } else if (currentScrollY > 50 && currentScrollY > lastScrollY()) {
-        // Scrolling down and not at the very top - hide header
-        setIsVisible(false);
+      } else {
+        // Scrolling down - hide header after scrolling past threshold
+        if (currentScrollY > 100) {
+          setIsVisible(false);
+        }
       }
     }
 
+    // Update last scroll position
     setLastScrollY(currentScrollY);
   };
-
+  
+  // Throttle scroll events using requestAnimationFrame
+  let isThrottled = false;
+  
+  const onScroll = () => {
+    if (!isThrottled) {
+      requestAnimationFrame(() => {
+        handleScroll();
+        isThrottled = false;
+      });
+      isThrottled = true;
+    }
+  };
+  
+  onMount(() => {
+    // Set initial scroll position
+    setLastScrollY(window.scrollY);
+    // Initialize header state
+    handleScroll();
+  });
+  
   createEffect(() => {
-    window.addEventListener('scroll', handleScroll);
+    // Add scroll event listener
+    window.addEventListener("scroll", onScroll, { passive: true });
 
     onCleanup(() => {
-      window.removeEventListener('scroll', handleScroll);
+      // Remove scroll event listener
+      window.removeEventListener("scroll", onScroll);
     });
   });
-
+  
   return (
-    <header 
-      class={`fixed top-0 w-full z-50 transition-all duration-300 ${
-        isVisible() ? 'translate-y-0' : '-translate-y-full'
+    <header
+      class={`fixed top-0 w-full z-50 transition-all duration-300 transform ${
+        isVisible() ? "translate-y-0" : "-translate-y-full"
       } ${
-        !isAtTop() ? 'bg-base-100/95 backdrop-blur-sm shadow-md' : 'bg-base-100'
+        !isAtTop() ? "bg-base-100/95 backdrop-blur-sm shadow-md" : "bg-base-100"
       }`}
     >
       {props.children}
     </header>
   );
-}
+}