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