feat(dividing): sticky

src/styles/header.scss

@@ -11,12 +11,21 @@
     justify-content: space-between;
   }
 
+  &__center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+  }
+
   .dividing {
     flex: 1;
     display: block;
     width: 100%;
     height: 25px;
     position: relative;
+    --dash-spacing: 10px;
+    --dash-width: 2px;
 
     // 虚线背景层 - 带遮罩
     &::before {
@@ -29,11 +38,11 @@
       background: repeating-linear-gradient(
                       90deg,
                       var(--foreground),
-                      var(--foreground) 2px,
+                      var(--foreground) var(--dash-width),
                       transparent 0,
-                      transparent 10px
+                      transparent var(--dash-spacing)
       );
-      background-size: 10px 100%;
+      background-size: var(--dash-spacing) 100%;
       animation: line-flow 3s linear infinite;
 
       // 遮罩层实现虚线淡入淡出效果
@@ -73,6 +82,37 @@
       animation: scan-line 5s ease-in-out infinite;
       pointer-events: none;
       z-index: 10;
+      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    &.sticky {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 5px;
+      z-index: 100;
+      --dash-spacing: 6px;
+      --dash-width: 2px;
+      background: var(--background);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+      &::before {
+        animation: line-flow 1.5s linear infinite;
+        mask-image: none;
+        -webkit-mask-image: none;
+        top: calc(50% - 1px);
+        height: 2px;
+      }
+
+      &::after {
+        animation: scan-line 2.5s ease-in-out infinite;
+        opacity: 0.6;
+        filter: blur(3px);
+        // 调整扫描线高度以适应 5px 容器
+        height: 200%;
+        width: 25%;
+      }
     }
   }
 
@@ -82,7 +122,7 @@
       background-position: 0 0;
     }
     100% {
-      background-position: 10px 0;
+      background-position: var(--dash-spacing) 0;
     }
   }