Fix fixed header and sidebar layout

Author: Lling0000

assets/site.js

@@ -520,6 +520,8 @@ const state = {
 
 const els = {
   body: document.body,
+  topbar: document.querySelector(".topbar"),
+  sidebar: document.querySelector(".sidebar"),
   brandLine: document.querySelector("#brand-line"),
   plannerModeLabel: document.querySelector("#planner-mode-label"),
   scheduleModeLabel: document.querySelector("#schedule-mode-label"),
@@ -842,6 +844,8 @@ function setLanguageChrome(lang) {
     button.classList.toggle("is-active", isActive);
     button.setAttribute("aria-pressed", String(isActive));
   });
+
+  updateFixedChromeMetrics();
 }
 
 function setMode(mode, shouldUpdateUrl = true) {
@@ -863,6 +867,23 @@ function setMode(mode, shouldUpdateUrl = true) {
   if (shouldUpdateUrl) updateUrl();
   updateReadingProgress();
   window.lucide?.createIcons();
+  updateFixedChromeMetrics();
+}
+
+function updateFixedChromeMetrics() {
+  window.requestAnimationFrame(() => {
+    const topbarHeight = Math.ceil(els.topbar?.getBoundingClientRect().height || 0);
+    const sidebarHeight = window.matchMedia("(max-width: 920px)").matches
+      ? Math.ceil(els.sidebar?.getBoundingClientRect().height || 0)
+      : 0;
+
+    if (topbarHeight > 0) {
+      document.documentElement.style.setProperty("--topbar-offset", `${topbarHeight}px`);
+    }
+    if (sidebarHeight > 0) {
+      document.documentElement.style.setProperty("--sidebar-offset", `${sidebarHeight}px`);
+    }
+  });
 }
 
 function updateUrl() {
@@ -1747,7 +1768,16 @@ els.resetMatrix.addEventListener("click", resetMatrixProgress);
 els.search.addEventListener("input", renderToc);
 els.top.addEventListener("click", () => window.scrollTo({ top: 0, behavior: "smooth" }));
 window.addEventListener("scroll", updateReadingProgress, { passive: true });
-window.addEventListener("resize", updateReadingProgress);
+window.addEventListener("resize", () => {
+  updateFixedChromeMetrics();
+  updateReadingProgress();
+});
+window.visualViewport?.addEventListener("resize", updateFixedChromeMetrics);
+
+if (window.ResizeObserver) {
+  const fixedChromeObserver = new ResizeObserver(updateFixedChromeMetrics);
+  [els.topbar, els.sidebar].filter(Boolean).forEach((node) => fixedChromeObserver.observe(node));
+}
 
 state.lang = preferredLanguage();
 state.mode = preferredMode();

assets/styles.css

@@ -20,6 +20,8 @@
   --code-ink: #eef6f7;
   --shadow: 0 18px 46px rgb(29 37 40 / 10%);
   --sidebar: clamp(17rem, 24vw, 21rem);
+  --topbar-offset: 4.4rem;
+  --sidebar-offset: 0px;
   --content: 66rem;
   --reader-content: 55rem;
   --radius: 8px;
@@ -38,6 +40,7 @@ html {
 body {
   margin: 0;
   min-width: 320px;
+  padding-top: var(--topbar-offset);
   overflow-x: hidden;
   background:
     linear-gradient(180deg, rgb(15 118 110 / 8%), transparent 28rem),
@@ -85,9 +88,9 @@ button:disabled {
 }
 
 .topbar {
-  position: sticky;
-  top: 0;
-  z-index: 30;
+  position: fixed;
+  inset: 0 0 auto;
+  z-index: 40;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -247,16 +250,17 @@ button:disabled {
 .app-shell {
   display: grid;
   grid-template-columns: var(--sidebar) minmax(0, 1fr);
-  min-height: calc(100vh - 4.4rem);
+  min-height: calc(100dvh - var(--topbar-offset));
 }
 
 .sidebar {
   position: fixed;
-  top: 4.4rem;
+  top: var(--topbar-offset);
   bottom: 0;
   left: 0;
   z-index: 20;
   width: var(--sidebar);
+  height: calc(100dvh - var(--topbar-offset));
   overflow: hidden;
   border-right: 1px solid var(--line);
   background: rgb(255 255 255 / 72%);
@@ -1059,7 +1063,7 @@ button:disabled {
 }
 
 .prose :target {
-  scroll-margin-top: 5.4rem;
+  scroll-margin-top: calc(var(--topbar-offset) + var(--sidebar-offset) + 1rem);
 }
 
 .prose.is-chapter-focused h2.is-focused-chapter-start {
@@ -1231,6 +1235,10 @@ button:disabled {
 }
 
 @media (max-width: 1040px) {
+  :root {
+    --topbar-offset: 7.25rem;
+  }
+
   .topbar {
     align-items: flex-start;
     flex-wrap: wrap;
@@ -1257,14 +1265,15 @@ button:disabled {
 
   .sidebar {
     position: fixed;
-    top: 4.4rem;
+    top: var(--topbar-offset);
     right: 0;
     bottom: auto;
     left: 0;
     z-index: 20;
     width: auto;
     height: auto;
-    overflow: visible;
+    max-height: calc(100dvh - var(--topbar-offset));
+    overflow: hidden;
     border-right: 0;
     border-bottom: 1px solid var(--line);
     background: rgb(246 250 248 / 95%);
@@ -1341,7 +1350,7 @@ button:disabled {
 
   .workspace {
     grid-column: auto;
-    padding-top: 6.9rem;
+    padding-top: calc(var(--sidebar-offset) + 1rem);
   }
 }
 
@@ -1357,6 +1366,10 @@ button:disabled {
 }
 
 @media (max-width: 640px) {
+  :root {
+    --topbar-offset: 7.7rem;
+  }
+
   .topbar {
     min-height: 6rem;
     padding: 0.7rem 0.85rem;
@@ -1396,12 +1409,8 @@ button:disabled {
     height: 2.2rem;
   }
 
-  .sidebar {
-    top: 6rem;
-  }
-
   .workspace {
-    padding-top: 7.1rem;
+    padding-top: calc(var(--sidebar-offset) + 0.9rem);
   }
 
   .learning-hero h1,

index.html

@@ -19,12 +19,12 @@
     <meta name="twitter:card" content="summary" />
     <link rel="canonical" href="https://lling0000.github.io/Vibe_coding_guide/" />
     <title>Vibe Coding Guide | AI Coding 工程工作流手册</title>
-    <link rel="stylesheet" href="./assets/styles.css?v=20260617-sidebar-review" />
+    <link rel="stylesheet" href="./assets/styles.css?v=20260617-fixed-chrome" />
     <script defer src="https://cdn.jsdelivr.net/npm/dompurify@3.2.6/dist/purify.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/marked@15.0.12/marked.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/lucide@0.475.0/dist/umd/lucide.min.js"></script>
-    <script defer src="./assets/site.js?v=20260617-sidebar-review"></script>
+    <script defer src="./assets/site.js?v=20260617-fixed-chrome"></script>
   </head>
   <body data-mode="planner">
     <div class="site-progress" aria-hidden="true">