样式修改

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);