modify

Author: MLeo

css/style.css

@@ -10,6 +10,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  text-decoration: none;
 }
 
 :root {
@@ -265,24 +266,27 @@ body.dark-theme .moon-icon {
 .container {
   display: grid;
   grid-template-columns: minmax(260px, 340px) 1fr;
+  grid-template-rows: minmax(0, 1fr);
   gap: var(--space-3);
   align-items: stretch;
-  flex: 1;
+  flex: 1 1 auto;
   min-height: 0;
-  height: 100%;
+  height: auto;
+  overflow: hidden;
 }
 
 .unit-list {
   background: var(--glass);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
-  padding: 18px 0;
   height: 100%;
   display: flex;
   flex-direction: column;
   min-height: 0;
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
   animation: riseIn 0.6s ease both;
   animation-delay: 0.05s;
 }
@@ -293,27 +297,32 @@ body.dark-theme .moon-icon {
 
 .unit-list h2 {
   color: var(--ink-2);
-  margin-bottom: 14px;
+  margin: 0;
   font-size: 20px;
   font-weight: 700;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   padding: 10px 20px;
   font-family: var(--font-mono);
-  border-bottom: 1px solid var(--border) ;
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--glass);
+  backdrop-filter: blur(18px) saturate(130%);
+  -webkit-backdrop-filter: blur(18px) saturate(130%);
+  flex-shrink: 0;
 }
 
 #unitListContainer {
   display: flex;
   flex-direction: column;
   gap: 6px;
   width: 100%;
-  padding: 0 10px 14px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  flex: 1 1 auto;
+  padding: 10px 14px;
   min-height: 0;
-  height: 100%;
+  height: auto;
+  padding-bottom: 18px;
 }
 
 .unit-item {
@@ -356,6 +365,7 @@ body.dark-theme .moon-icon {
   flex-direction: column;
   gap: var(--space-2);
   min-height: 0;
+  height: 100%;
 }
 
 .player-column .player-section {
@@ -1160,6 +1170,7 @@ body.blur-translation .lyric-line:hover .lyric-text {
   font-size: 12px;
   color: var(--ink-2);
   font-family: var(--font-mono);
+  flex-shrink: 0;
 }
 
 html,

index.html

@@ -71,7 +71,7 @@ <h1>新概念英语</h1>
       </select>
     </label>
     <div class="header-actions">
-      <span class="status-pill">NCE</span>
+      <span class="status-pill"><a href="https://ichochy.com" target="_blank">Blog</a></span>
       <button id="themeToggle" class="theme-toggle" aria-label="切换主题">
       <svg class="sun-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
         <circle cx="10" cy="10" r="4" stroke="currentColor" stroke-width="1.5" />

js/main.js

@@ -151,6 +151,7 @@ class ReadingSystem {
     await this.loadBookConfig();
     this.renderUnitList();
     this.renderUnitSelect();
+    this.resetUnitListScroll();
   }
 
   renderEmptyState(message) {
@@ -160,6 +161,14 @@ class ReadingSystem {
     if (this.dom.unitList) {
       this.dom.unitList.innerHTML = '';
     }
+    this.resetUnitListScroll();
+  }
+
+  resetUnitListScroll() {
+    const scrollContainer = this.dom.unitList?.closest('.unit-list');
+    if (scrollContainer) {
+      scrollContainer.scrollTop = 0;
+    }
   }
 
   async loadBookConfig() {
@@ -306,13 +315,20 @@ class ReadingSystem {
 
   updateActiveUnit(unitIndex) {
     if (this.dom.unitList) {
+      let activeItem = null;
+
       this.dom.unitList.querySelectorAll('.unit-item').forEach((item, index) => {
         if (index === unitIndex) {
           item.classList.add('active');
+          activeItem = item;
         } else {
           item.classList.remove('active');
         }
       });
+
+      if (activeItem) {
+        activeItem.scrollIntoView({ block: 'center', inline: 'nearest' });
+      }
     }
 
     if (this.dom.unitSelect) {