From 9898d34b018204c1b56b908221c598d81a6a22cf Mon Sep 17 00:00:00 2001
From: jack <251108449@qq.com>
Date: Thu, 16 Jul 2026 14:45:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/withmind/assets/index.rem.css | 28 ++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/views/withmind/assets/index.rem.css b/src/views/withmind/assets/index.rem.css
index 8628dcc..250bffc 100644
--- a/src/views/withmind/assets/index.rem.css
+++ b/src/views/withmind/assets/index.rem.css
@@ -2,9 +2,20 @@ html {
   font-size: 37.5px;
 }
 
+body {
+  /* .page 用 absolute 脱离文档流,需要给 body 一个最小高度让滚动条出现 */
+  min-height: 152.4rem;
+  position: relative;
+}
+
 .page {
   background-color: rgba(255, 255, 255, 1);
-  position: relative;
+  /* 不用 transform 居中!transform 会让子元素 fixed/sticky 元素的 containing block 变成 .page,
+     导致 fixed 元素相对 .page 而不是 viewport。
+     改用 absolute 居中:position: absolute + left: 50% + margin-left: -25.6rem */
+  position: absolute;
+  left: 50%;
+  margin-left: -25.6rem;
   width: 51.2rem;
   /* 改用 min-height:页面跟内容自适应,后续插入任何板块不会被 page 高度裁掉。
      152.4rem 是历史基线高度,内容多了 page 会自动撑开。 */
@@ -24,11 +35,22 @@ html {
 .section_1 {
   width: 51.2rem;
   height: 60.054rem;
+  /* .section_2 浮起来后,给 section_1 加 padding-top 防止 logo 被覆盖 */
+  padding-top: 2.134rem;
+  box-sizing: border-box;
 }
 
 .section_2 {
-  background-color: rgba(255, 255, 255, 1);
-  position: relative;
+  background-color: rgba(255, 255, 255, 0.95);
+  /* 用 fixed 而不是 sticky:sticky 会被 .page 的 transform 父链失效,
+     fixed 永远相对 viewport 定位,不受 transform 影响 */
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  /* 居中:用 margin: 0 auto (fixed 元素也支持 auto margin) */
+  margin: 0 auto;
+  z-index: 1000;
   width: 51.2rem;
   height: 2.134rem;
   border: 1px solid rgba(239, 239, 239, 1);