hexo-theme-linen 1.0.27 → 1.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-linen",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "description": "A clean Hexo theme",
   "main": "index.js",
   "homepage": "https://github.com/lynanbreeze/hexo-theme-linen",

package/scripts/lazyload/inject.js

@@ -19,9 +19,11 @@ module.exports = function (hexo) {
       ...(hexo?.config?.theme_config?.lazyload || {}),
     };
 
-    const placeholderImage = /^(https?:\/\/|\/|data:image)/i.test(loadingImage) || loadingImage?.startsWith('../img')
-      ? `url(${loadingImage})`
-      : loadingImage;
+    const placeholderImage =
+      /^(https?:\/\/|\/|data:image|\.\.\/)/i.test(loadingImage) ||
+      /\.(svg|png|jpg|jpeg|webp|gif)$/i.test(loadingImage)
+        ? `url(${loadingImage})`
+        : loadingImage;
 
     const injectedStyles = `.lazyload-outer-wrap .caption{
     width: 100%;

package/source/linen-theme/css/_mediaquery.scss

@@ -10,9 +10,6 @@
   }
   .nav-header.is-post {
     position: fixed;
-    .header-inner {
-      padding: 0 $commonPadding;
-    }
   }
   .nav-header.is-post.hide {
     transform: translateY(-100%);
@@ -42,6 +39,7 @@
     border-right: none;
     -ms-overflow-style: unset;
     scrollbar-width: unset;
+    overscroll-behavior: contain;
     @include safe-padding(15px);
     .toc-item-wrap {
       transition: unset;

package/source/linen-theme/css/linen.scss

@@ -41,6 +41,9 @@ html {
   min-width: 320px;
   scroll-behavior: smooth;
   overscroll-behavior: auto none;
+  &.no-scroll {
+    overflow: hidden !important;
+  }
 }
 
 * {
@@ -217,6 +220,9 @@ body {
       display: block;
     }
   }
+  &.no-scroll {
+    overflow: hidden !important;
+  }
 }
 * {
   box-sizing: border-box;
@@ -233,7 +239,8 @@ body {
   background-color: #fff;
   // backdrop-filter: saturate(180%) blur(20px);
   transform: translateY(0);
-  transition: transform 0.3s ease;
+  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform;
   z-index: 9;
   position: relative;
   top: 0;
@@ -362,7 +369,7 @@ body {
     }
   }
   &.hide {
-    transform: translateY(0);
+    transform: translateY(-100%);
   }
 }
 
@@ -1830,6 +1837,7 @@ body {
     transition: transform cubic-bezier(0.4, 0, 0.6, 1) 0.3s;
     display: flex;
     flex-direction: column;
+    overscroll-behavior: contain;
     @include safe-padding(15px);
     &.visible {
       transform: translateY(0);
@@ -2594,6 +2602,7 @@ body {
   &.visible {
     pointer-events: all;
     opacity: 1;
+    touch-action: none;
   }
 }
 

package/source/linen-theme/js/hdr.js

@@ -52,7 +52,7 @@ function switchHDR() {
           } else {
             var hrefAttr = link.getAttribute("href");
             if (hrefAttr && hrefAttr.includes(SDRPath)) {
-              link.setAttribute("href", HDRPath);
+              link.setAttribute("href", hrefAttr.replace(SDRPath, HDRPath));
             }
           }
         } else {
@@ -61,7 +61,7 @@ function switchHDR() {
           } else {
             var hrefAttr = link.getAttribute("href");
             if (hrefAttr && hrefAttr.includes(HDRPath)) {
-              link.setAttribute("href", SDRPath);
+              link.setAttribute("href", hrefAttr.replace(HDRPath, SDRPath));
             }
           }
         }

package/source/linen-theme/js/linen.js

@@ -147,30 +147,27 @@ function isElementInViewport(el) {
 }
 
 function copyToClipboard(text) {
-  if (navigator.clipboard) {
-    copyToClipboard = function () {
-      navigator.clipboard
-        .writeText(text)
-        .then(() => {})
-        .catch((err) => {
-          console.error("复制失败:", err);
-        });
-    };
-  } else {
-    copyToClipboard = function () {
-      const textArea = document.createElement("textarea");
-      textArea.value = text;
-      document.body.appendChild(textArea);
-      textArea.select();
-      try {
-        document.execCommand("copy");
-      } catch (err) {
+  if (navigator.clipboard && window.isSecureContext) {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {})
+      .catch((err) => {
         console.error("复制失败:", err);
-      }
-      document.body.removeChild(textArea);
-    };
+      });
+  } else {
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+    textArea.style.position = "fixed";
+    textArea.style.opacity = "0";
+    document.body.appendChild(textArea);
+    textArea.select();
+    try {
+      document.execCommand("copy");
+    } catch (err) {
+      console.error("复制失败:", err);
+    }
+    document.body.removeChild(textArea);
   }
-  copyToClipboard(text);
 }
 
 function highlightAnchor(hash, highlightClass = "anchor-highlight") {
@@ -270,7 +267,8 @@ function onScroll() {
   var header = document.querySelector(".nav-header");
   if (!header) return;
 
-  var currentScrollY = window.scrollY;
+  var rawScrollY = window.scrollY;
+  var currentScrollY = Math.max(0, rawScrollY);
   var triggerHeight = window.innerHeight * 1.5;
 
   if (!window.$gitalkInitiated && currentScrollY > window.innerHeight) {
@@ -283,27 +281,32 @@ function onScroll() {
     return;
   }
 
-  if (currentScrollY <= 10) {
+  // 接近顶部时（<= 60px），强制展开并退出，消除 iOS/Mac 橡皮筋回弹误判与闪烁
+  if (currentScrollY <= 60) {
     header.classList.remove("hide");
+    if (backToTop) backToTop.classList.remove("visible");
     previousScrollY = currentScrollY;
     return;
   }
 
   var scrollDelta = currentScrollY - previousScrollY;
-  if (Math.abs(scrollDelta) < 5) {
+  // 滤除手指微小抖动
+  if (Math.abs(scrollDelta) < 8) {
     return;
   }
 
   if (scrollDelta < 0) {
+    // 向上滑动：即刻平滑展开导航栏
     if (!document.querySelector(".pswp--open")) {
       header.classList.remove("hide");
     }
-    if (currentScrollY >= triggerHeight) {
+    if (backToTop && currentScrollY >= triggerHeight) {
       backToTop.classList.add("visible");
     }
   } else {
-    backToTop.classList.remove("visible");
-    if (currentScrollY > window.innerHeight * 0.75) {
+    // 向下滑动：离开顶部 60% 视口后平滑收起导航栏
+    if (backToTop) backToTop.classList.remove("visible");
+    if (currentScrollY > window.innerHeight * 0.6) {
       header.classList.add("hide");
     }
   }
@@ -311,7 +314,20 @@ function onScroll() {
   previousScrollY = currentScrollY;
 }
 
-window.addEventListener("scroll", throttle(onScroll, 300));
+var isScrollTicking = false;
+window.addEventListener(
+  "scroll",
+  function () {
+    if (!isScrollTicking) {
+      isScrollTicking = true;
+      window.requestAnimationFrame(function () {
+        onScroll();
+        isScrollTicking = false;
+      });
+    }
+  },
+  { passive: true }
+);
 
 var resizeTimer = null;
 window.addEventListener("resize", function () {
@@ -339,6 +355,18 @@ function onclickPostItem(element) {
   }
 }
 
+function setBodyScrollLocked(locked) {
+  var body = document.body;
+  var html = document.documentElement;
+  if (locked) {
+    body && body.classList.add("no-scroll");
+    html && html.classList.add("no-scroll");
+  } else {
+    body && body.classList.remove("no-scroll");
+    html && html.classList.remove("no-scroll");
+  }
+}
+
 function handleClick(e) {
   try {
     var target = e.target;
@@ -358,7 +386,7 @@ function handleClick(e) {
     if (/close-series-popup-icon/.test(target.className)) {
       seriesElement?.classList?.remove("visible");
       maskElement.classList.remove("visible");
-      bodyElement.classList.remove("no-scroll");
+      setBodyScrollLocked(false);
     } else if (["H2", "H3"].includes(target.tagName) && target.id) {
       const newLocation = new URL(location.href);
       newLocation.hash = `#${target.id}`;
@@ -415,7 +443,7 @@ function handleClick(e) {
       if (tocElement?.classList?.contains("visible")) {
         tocElement.classList.remove("visible");
         maskElement.classList.remove("visible");
-        bodyElement.classList.remove("no-scroll");
+        setBodyScrollLocked(false);
       }
       if (targetId === "to-page-top") {
         window.scrollTo({
@@ -456,11 +484,11 @@ function handleClick(e) {
       if (tocElement?.classList?.contains("visible")) {
         tocElement.classList.remove("visible");
         maskElement.classList.remove("visible");
-        bodyElement.classList.remove("no-scroll");
+        setBodyScrollLocked(false);
       } else {
         tocElement.classList.add("visible");
         maskElement.classList.add("visible");
-        bodyElement.classList.add("no-scroll");
+        setBodyScrollLocked(true);
       }
       return;
     } else if (
@@ -473,13 +501,13 @@ function handleClick(e) {
       seriesElement?.classList?.add("visible");
       maskElement?.classList?.add("visible");
       donateModal?.classList?.remove("visible");
-      bodyElement.classList.add("no-scroll");
+      setBodyScrollLocked(true);
       return;
     } else if (target?.className?.includes("series-item-link")) {
       e.preventDefault();
       seriesElement?.classList?.remove("visible");
       maskElement.classList.remove("visible");
-      bodyElement.classList.remove("no-scroll");
+      setBodyScrollLocked(false);
       const href =
         target.getAttribute("href") ||
         target.parentElement.getAttribute("href");
@@ -489,7 +517,7 @@ function handleClick(e) {
       tocElement?.classList?.remove("visible");
       seriesElement?.classList?.remove("visible");
       maskElement.classList.remove("visible");
-      bodyElement.classList.remove("no-scroll");
+      setBodyScrollLocked(false);
       return;
     } else if (target?.className?.includes("fold-toggle")) {
       const parentElement = target.parentElement;
@@ -517,24 +545,27 @@ function handleClick(e) {
   }
 }
 
+var isClickHandlerBound = false;
 function bindClickHandler() {
+  if (isClickHandlerBound) return;
   document.addEventListener("click", handleClick, true);
+  isClickHandlerBound = true;
 }
 
 window.addEventListener("load", bindClickHandler);
-window.addEventListener("pageshow", (e) => {
-  requestAnimationFrame(() => {
-    bindClickHandler();
-  });
+window.addEventListener("pageshow", () => {
+  bindClickHandler();
 });
 
 function initAgeWarning() {
   const ageWarningElement = document.getElementById("post-age-warning");
   if (!ageWarningElement) return;
-  const dateStr = document
-    .querySelector("#post .post-meta .date")
-    .getAttribute("datetime");
+  const dateElement = document.querySelector("#post .post-meta .date");
+  const dateStr = dateElement ? dateElement.getAttribute("datetime") : null;
+  if (!dateStr) return;
+
   const postDate = new Date(dateStr);
+  if (isNaN(postDate.getTime())) return;
   const now = new Date();
 
   const diffTime = now - postDate;
@@ -547,10 +578,30 @@ function initAgeWarning() {
     }
   } else {
     if (ageWarningElement) {
-      ageWarningElement.style = "display: none";
+      ageWarningElement.style.display = "none";
     }
   }
   return diffDays;
 }
 
 initAgeWarning();
+
+function initMaskScrollLock() {
+  var mask = document.getElementById("mask");
+  if (!mask) return;
+  mask.addEventListener(
+    "touchmove",
+    function (e) {
+      if (mask.classList.contains("visible")) {
+        e.preventDefault();
+      }
+    },
+    { passive: false }
+  );
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initMaskScrollLock);
+} else {
+  initMaskScrollLock();
+}

package/source/linen-theme/js/replace-emoji.js

@@ -1,4 +1,5 @@
 function replaceEmojis() {
+  if (!document.body) return;
   const replacements = [{ emoji: "✅", className: "custom-checked-checkbox" }];
 
   replacements.forEach(({ emoji, className }) => {
@@ -7,9 +8,16 @@ function replaceEmojis() {
       NodeFilter.SHOW_TEXT,
       {
         acceptNode(node) {
-          return node.nodeValue.includes(emoji)
-            ? NodeFilter.FILTER_ACCEPT
-            : NodeFilter.FILTER_REJECT;
+          if (!node.nodeValue || !node.nodeValue.includes(emoji)) {
+            return NodeFilter.FILTER_REJECT;
+          }
+          if (
+            node.parentElement &&
+            node.parentElement.closest("pre, code, textarea, script, style")
+          ) {
+            return NodeFilter.FILTER_REJECT;
+          }
+          return NodeFilter.FILTER_ACCEPT;
         },
       },
     );

package/source/linen-theme/js/toc.js

@@ -2,182 +2,212 @@ document.addEventListener("DOMContentLoaded", () => {
   const tocContainer = document.getElementById("toc");
   if (!tocContainer) return;
 
-  const headers = [...document.querySelectorAll("h2, h3")];
-  if (headers.length === 0) return;
+  const contentContainer =
+    document.getElementById("page-content") ||
+    document.getElementById("post") ||
+    document.body;
+
+  const headerElements = Array.from(
+    contentContainer.querySelectorAll("h2, h3"),
+  );
+  if (headerElements.length === 0) return;
+
+  // 1. 保证所有标题均具备有效 ID（补全缺失的 ID 并写回 DOM）
+  headerElements.forEach((header, index) => {
+    if (!header.id) {
+      const text = (header.textContent || "").trim();
+      header.id =
+        text.replace(/\s+/g, "-").toLowerCase() || `heading-${index}`;
+    }
+  });
+
+  // 2. 解析 TOC 目录的 DOM 结构建立映射字典
+  const tocItemWraps = Array.from(
+    tocContainer.querySelectorAll(".toc-item-wrap"),
+  );
+  const tocItemsMap = new Map(); // h2Id -> { wrap, link, subMap: Map(h3Id -> link) }
+  const h3ToH2Map = new Map(); // h3Id -> h2Id
+
+  tocItemWraps.forEach((wrap) => {
+    const h2Link = wrap.querySelector(".toc-item-link");
+    if (!h2Link) return;
+    const h2Id = h2Link.dataset.id;
+    if (!h2Id) return;
+
+    const subMap = new Map();
+    const subLinks = Array.from(wrap.querySelectorAll(".toc-sub-item-link"));
+    subLinks.forEach((subLink) => {
+      const h3Id = subLink.dataset.id;
+      if (h3Id) {
+        subMap.set(h3Id, subLink);
+        h3ToH2Map.set(h3Id, h2Id);
+      }
+    });
+
+    tocItemsMap.set(h2Id, {
+      wrap,
+      link: h2Link,
+      subMap,
+    });
+  });
+
+  // 3. 构建正文标题列表
+  let currentH2Id = null;
+  const headers = headerElements.map((header) => {
+    const isH2 = header.tagName === "H2";
+    if (isH2) {
+      currentH2Id = header.id;
+    }
+    return {
+      id: header.id,
+      isH2,
+      h2Id: isH2 ? header.id : h3ToH2Map.get(header.id) || currentH2Id,
+      element: header,
+    };
+  });
+
+  // 顶部导航栏避让阈值
+  const TOP_OFFSET = 80;
 
-  const toc = [];
-  let lastH2 = null;
-  let previousH2Id = null;
-  let previousH3Id = null;
   let lastActiveH2Id = null;
   let lastActiveH3Id = null;
 
-  headers.forEach((header) => {
-    const title = header.textContent.trim();
-    const id = header.id || title.replace(/\s+/g, "-").toLowerCase();
-
-    if (header.tagName === "H2") {
-      lastH2 = {
-        title,
-        id,
-        active: false,
-        children: [],
-        visible: false,
-        passiveVisible: false,
+  // 4. 目录容器内部滚动居中/可见，避免触发外部 window 的异常抖动
+  function scrollIntoTocView(element) {
+    if (!element || !tocContainer) return;
+    const containerRect = tocContainer.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+
+    if (elementRect.top < containerRect.top) {
+      tocContainer.scrollTop -= containerRect.top - elementRect.top + 20;
+    } else if (elementRect.bottom > containerRect.bottom) {
+      tocContainer.scrollTop += elementRect.bottom - containerRect.bottom + 20;
+    }
+  }
+
+  // 5. 计算当前应当激活的 H2 / H3
+  function determineActive() {
+    // 优先兼容外部锚定参数 window.anchoringId
+    const currentAnchoringId =
+      typeof window !== "undefined" && "anchoringId" in window
+        ? window.anchoringId
+        : null;
+
+    if (currentAnchoringId) {
+      if (tocItemsMap.has(currentAnchoringId)) {
+        return {
+          h2Id: currentAnchoringId,
+          h3Id: null,
+        };
+      }
+      if (h3ToH2Map.has(currentAnchoringId)) {
+        return {
+          h2Id: h3ToH2Map.get(currentAnchoringId),
+          h3Id: currentAnchoringId,
+        };
+      }
+    }
+
+    // 根据滚动位置，查找位于视口顶部触发线（top <= TOP_OFFSET）之上的最后一个标题
+    let activeHeading = null;
+    for (let i = 0; i < headers.length; i++) {
+      const header = headers[i];
+      const rect = header.element.getBoundingClientRect();
+      if (rect.top <= TOP_OFFSET) {
+        activeHeading = header;
+      } else {
+        break;
+      }
+    }
+
+    // 若未滚动到任何标题（如文章开头前言），激活第一个 H2
+    if (!activeHeading) {
+      const firstH2 = headers.find((h) => h.isH2);
+      return {
+        h2Id: firstH2 ? firstH2.id : null,
+        h3Id: null,
       };
-      toc.push(lastH2);
-    } else if (header.tagName === "H3" && lastH2) {
-      lastH2.children.push({
-        title,
-        id,
-        active: false,
-        visible: false,
-      });
     }
-  });
 
-  const tocItems = (tocContainer.children[1] && tocContainer.children[1].children) || [];
-
-  const observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        const id = entry.target.id;
-        const isVisible = !!entry.intersectionRatio;
-        toc.forEach((h2) => {
-          if (h2.id === id) {
-            h2.visible = isVisible;
-            if (isVisible) {
-              previousH2Id = h2.id;
-            }
-          }
-          h2.children.forEach((h3) => {
-            if (h3.id === id) {
-              h3.visible = isVisible;
-              if (isVisible) {
-                previousH3Id = h3.id;
-              }
-            }
-          });
-        });
-        toc.forEach((item) => {
-          item.passiveVisible =
-            (item.children || []).findIndex((h3) => h3.visible) !== -1;
-          if (item.passiveVisible) {
-            previousH2Id = item.id;
-          }
-        });
-      });
+    if (activeHeading.isH2) {
+      return {
+        h2Id: activeHeading.id,
+        h3Id: null,
+      };
+    }
 
-      const activeH2Index = toc.findIndex(
-        (tocItem) => tocItem.passiveVisible || tocItem.visible,
-      );
-      toc.forEach((h2, h2Index) => {
-        h2.active = h2Index === activeH2Index;
-        if (h2Index === activeH2Index) {
-          const activeH3Index = (h2.children || []).findIndex(
-            (h3) => h3.visible,
-          );
-          h2.children.forEach((h3, h3Index) => {
-            h3.active = h3Index === activeH3Index;
-          });
-        } else {
-          h2.children.forEach((h3) => {
-            h3.active = false;
-          });
-        }
-      });
+    return {
+      h2Id: activeHeading.h2Id,
+      h3Id: activeHeading.id,
+    };
+  }
+
+  // 6. 执行高亮更新与 DOM 渲染
+  function updateActive() {
+    const { h2Id, h3Id } = determineActive();
+
+    if (lastActiveH2Id === h2Id && lastActiveH3Id === h3Id) {
+      return;
+    }
 
-      const activeH2 = toc.find((item) =>
-        typeof anchoringId !== "undefined" && anchoringId
-          ? item.id === anchoringId
-          : item.active,
-      );
+    lastActiveH2Id = h2Id;
+    lastActiveH3Id = h3Id;
 
-      let targetH2Id = null;
-      let targetH3Id = null;
+    let targetElementToScroll = null;
 
-      if (activeH2) {
-        targetH2Id = activeH2.id;
-        const activeH3 = (activeH2.children || []).find((item) => item.active);
-        targetH3Id = activeH3 ? activeH3.id : null;
+    tocItemsMap.forEach((item, currentH2Id) => {
+      const isH2Active = currentH2Id === h2Id;
+      if (isH2Active) {
+        item.wrap.classList.add("active");
+        targetElementToScroll = item.wrap;
       } else {
-        const isScrollingUp = window.scrollY < previousScrollY;
-        if (isScrollingUp) {
-          const previousH2Index = toc.findIndex((h2) => h2.id === previousH2Id);
-          const previousH3ParentIndex = toc.findIndex((h2) =>
-            h2 && h2.children && h2.children.find((h3) => h3.id === previousH3Id),
-          );
-          let targetH2Index = 0;
-          if (!previousH3Id || previousH3ParentIndex > previousH2Index) {
-            targetH2Index = previousH2Index - 1;
-          } else {
-            targetH2Index = previousH3ParentIndex;
-          }
-          const newActiveH2 = toc[targetH2Index];
-          if (newActiveH2) {
-            targetH2Id = newActiveH2.id;
-            let activeH3Index = (newActiveH2.children ? newActiveH2.children.length : 0) - 1;
-            if (newActiveH2.children && newActiveH2.children.find((h3) => h3.id === previousH3Id)) {
-              const previousH3Index = newActiveH2.children.findIndex(
-                (h3) => h3.id === previousH3Id,
-              );
-              activeH3Index =
-                previousH3Index - 1 > -1 ? previousH3Index - 1 : 0;
-            }
-            targetH3Id = (newActiveH2.children && newActiveH2.children[activeH3Index] && newActiveH2.children[activeH3Index].id) || null;
-          }
-        } else {
-          targetH2Id = previousH2Id;
-          targetH3Id = previousH3Id;
-        }
+        item.wrap.classList.remove("active");
       }
 
-      if (targetH2Id) {
-        if (lastActiveH2Id === targetH2Id && lastActiveH3Id === targetH3Id && !anchoringId) {
-          return;
+      // 仅在当前 H2 为 active 时匹配子项 H3，彻底杜绝跨章节残留
+      item.subMap.forEach((subLink, currentH3Id) => {
+        if (isH2Active && currentH3Id === h3Id) {
+          subLink.classList.add("active");
+          targetElementToScroll = subLink;
+        } else {
+          subLink.classList.remove("active");
         }
-        lastActiveH2Id = targetH2Id;
-        lastActiveH3Id = targetH3Id;
+      });
+    });
 
-        if (activeH2 && activeH2.children && activeH2.children.every((h3) => !h3.active)) {
-          previousH3Id = null;
-        }
+    if (targetElementToScroll) {
+      scrollIntoTocView(targetElementToScroll);
+    }
+  }
 
-        Array.from(tocItems).forEach((tocItem) => {
-          if (tocItem.children[0].dataset.id === targetH2Id) {
-            tocItem.className = "toc-item-wrap active";
-            tocItem.scrollIntoView({
-              block: "nearest",
-              inline: "nearest",
-            });
-          } else {
-            tocItem.className = "toc-item-wrap";
-          }
-          const subItems = tocItem.children[1];
-          if (subItems) {
-            Array.from(subItems.children || []).forEach((subItem) => {
-              if (subItem.children[0].dataset.id === targetH3Id) {
-                subItem.children[0].className = "toc-sub-item-link active";
-                subItem.children[0].scrollIntoView({
-                  block: "nearest",
-                  inline: "nearest",
-                });
-              } else {
-                subItem.children[0].className = "toc-sub-item-link";
-              }
-            });
-          }
-        });
-
-        if (anchoringId) {
-          anchoringId = null;
-        }
-      }
-    },
-    {
-      rootMargin: "0px",
-      threshold: [0, 1],
-    },
-  );
-  headers.forEach((header) => observer.observe(header));
+  // 7. 使用 requestAnimationFrame 优化滚动触发频率
+  let isTicking = false;
+  function requestUpdate() {
+    if (isTicking) return;
+    isTicking = true;
+    window.requestAnimationFrame(() => {
+      updateActive();
+      isTicking = false;
+    });
+  }
+
+  // 8. 监听视口变化与滚动
+  window.addEventListener("scroll", requestUpdate, { passive: true });
+  window.addEventListener("resize", requestUpdate, { passive: true });
+
+  if ("IntersectionObserver" in window) {
+    const observer = new IntersectionObserver(
+      () => {
+        requestUpdate();
+      },
+      {
+        rootMargin: `-${TOP_OFFSET}px 0px 0px 0px`,
+        threshold: [0, 1],
+      },
+    );
+    headerElements.forEach((header) => observer.observe(header));
+  }
+
+  // 初始执行一次
+  updateActive();
 });