diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 97d3cf0..3a98eb1 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -32,7 +32,7 @@
   /* 三栏骨架 */
   --col-left: 236px;
   --col-main: 640px;
-  --col-right: 306px;
+  --col-right: 264px;
   --gutter: 28px;
 }
 
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 9e7cb63..1eb300e 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import LeftNav from '../components/LeftNav.vue'
 import RightRail from '../components/RightRail.vue'
@@ -20,6 +20,17 @@ const tag = computed(() => route.query.tag || '')
 const page = computed(() => Number(route.query.page || 1))
 const size = computed(() => site.posts_per_page || 10)
 
+// 滚动时收缩顶部标题栏：隐藏大标题，只留 tabs 贴顶
+const scrolled = ref(false)
+function onScroll() {
+  scrolled.value = window.scrollY > 24
+}
+onMounted(() => {
+  onScroll()
+  window.addEventListener('scroll', onScroll, { passive: true })
+})
+onBeforeUnmount(() => window.removeEventListener('scroll', onScroll))
+
 const tabs = [
   { label: '全部', value: '' },
   { label: '长文', value: 'long' },
@@ -71,7 +82,7 @@ applyDocTitle('')
       <LeftNav />
 
       <main class="main">
-        <header class="sticky-head">
+        <header class="sticky-head" :class="{ 'is-compact': scrolled }">
           <h1 class="page-title">{{ heading }}</h1>
           <nav class="tabs">
             <button
@@ -139,17 +150,38 @@ applyDocTitle('')
   backdrop-filter: blur(6px);
   border-bottom: 1px solid var(--line);
   padding: 8px 16px 0;
+  transition: padding 0.2s ease;
 }
 
 .page-title {
+  margin: 0;
   font-size: 17px;
   font-weight: 600;
+  overflow: hidden;
+  max-height: 26px;
+  opacity: 1;
+  transition:
+    max-height 0.2s ease,
+    opacity 0.2s ease;
 }
 
 .tabs {
   display: flex;
   gap: 2px;
   margin-top: 4px;
+  transition: margin-top 0.2s ease;
+}
+
+/* 滚动后：收起大标题，只留 tabs 紧贴顶部 */
+.sticky-head.is-compact {
+  padding-top: 6px;
+}
+.sticky-head.is-compact .page-title {
+  max-height: 0;
+  opacity: 0;
+}
+.sticky-head.is-compact .tabs {
+  margin-top: 0;
 }
 
 .tab {
@@ -207,5 +239,9 @@ applyDocTitle('')
     border-left: 0;
     border-right: 0;
   }
+  /* 移动端 TopBar 也吸顶（高 54px），标题栏贴其下方 */
+  .sticky-head {
+    top: 54px;
+  }
 }
 </style>