【CSS in Depth 2 精译_043】6.5 CSS 中的粘性定位技术 + 本章小结

时间:2024-10-03 07:34:44

当前内容所在位置(可进入专栏查看其他译好的章节内容)

  • 第一章 层叠、优先级与继承(已完结)
  • 第二章 相对单位(已完结)
  • 第三章 文档流与盒模型(已完结)
  • 第四章 Flexbox 布局(已完结)
  • 第五章 网格布局(已完结)
  • 【第六章 定位与堆叠上下文】(已完结)
    • 6.1 固定定位
      • 6.1.1 创建一个固定定位的模态对话框
      • 6.1.2 在模态对话框打开时防止屏幕滚动
      • 6.1.3 控制定位元素的大小
    • 6.2 绝对定位
      • 6.2.1 关闭按钮的绝对定位
      • 6.2.2 伪元素的定位问题
    • 6.3 相对定位
      • 6.3.1 创建下拉菜单(上)
      • 6.3.2 创建 CSS 三角形(下)
    • 6.4 堆叠上下文与 z-index
      • 6.4.1 理解渲染过程与堆叠顺序(上)
      • 6.4.2 用 z-index 控制堆叠顺序(上)
      • 6.4.3 深入理解堆叠上下文(下)
    • 6.5 粘性定位 ✔️​
    • 6.6 本章小结 ✔️​
  • 第七章 响应式设计(精译中 ⏳)
    • 7.1 移动端优先

文章目录

    • 6.5 粘性定位 Sticky positioning
    • 6.6 本章小结 Summary

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
“千里之行,始于足下。”转眼来到了本章的最后一节——粘性定位。在第一版中,这个特性还处于试验阶段,很多地方都存在兼容性问题,介绍它的时候能切身感受到应用到实战时的繁琐。时隔六年,粘性定位这一特性已然成熟,内容也进行了同步更新。与时俱进这四个字,早已内化为这些前端大牛的撸码日常了。这值得我们学习。

6.5 粘性定位 Sticky positioning

最后一种定位类型是 粘性定位(sticky positioning。粘性定位有点像相对定位和固定定位的结合体:正常情况下,元素会随着页面滚动;当到达屏幕的特定位置后,继续滚动屏幕则会“锁定”在该位置。其最常见的应用场景为侧边栏导航。

回到前面那个含有模态对话框以及下拉菜单的示例页,本节将基于该页面添加一个粘性定位的右侧边栏,实现如图 6.14 所示的双列布局效果:

图 6.14 粘性定位的侧边栏在初始状态下为普通定位

【图 6.14 粘性定位的侧边栏在初始状态下为普通定位】

页面刚加载时,侧边栏位置一切正常。页面一滚动,它也跟着滚动到某个位置;待到侧边栏即将离开视口时,则会锁在该位置不动;而当页面其余部分继续滚动时,侧边栏又像一个设置了固定定位的元素,继续停留在屏幕上,效果如图 6.15 所示:

图 6.15 侧边栏继续“固定”在视口内的效果

【图 6.15 侧边栏继续“固定”在视口内的效果】

为了方便演示,页面结构需略作调整,再重新定义一下两栏。根据代码清单 6.14 更新示例页。该代码将之前的内容(即下拉菜单与标题栏)放在了左侧边栏,同时在右侧边栏放置一个类名为 “affix”(译注:这里的 affix 可以理解为“附件、附加物”)的菜单。

代码清单 6.14 将页面改为带侧边栏的双列布局

<main class="container">
  <div class="col-main"><!-- 将现有内容用 col-main 包起来,作为正文栏 -->
    <nav>
      <div class="dropdown">
        <div class="dropdown-label">Main Menu</div>
        <div class="dropdown-menu">
          <ul class="submenu">
            <li><a href="/">Home</a></li>
            <li><a href="/coffees">Coffees</a></li>
            <li><a href="/brewers">Brewers</a></li>
            <li><a href="/specials">Specials</a></li>
            <li><a href="/about">About us</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <h1>Wombat Coffee Roasters</h1>
  </div>

  <aside class="col-sidebar"><!-- 再加一个侧边栏元素 -->
    <div class="affix"><!-- 新的侧边栏里面放一个 affix 元素 -->
      <ul class="submenu">
        <li><a href="/">Home</a></li>
        <li><a href="/coffees">Coffees</a></li>
        <li><a href="/brewers">Brewers</a></li>
        <li><a href="/specials">Specials</a></li>
        <li><a href="/about">About us</a></li>
      </ul>
    </div>
  </aside>
</main>

接着更新页面样式,将容器设置为弹性容器,并指定两栏的列宽。本例复用了下拉菜单中的子菜单样式,您也可以给侧边栏添加其他想要的元素与样式。根据代码清单 6.15 更新本地样式表。

代码清单 6.15 创建一个两栏布局及粘性定位的侧边栏的 CSS 样式

.container {
  display: flex; /* 将容器设置为两栏布局的弹性容器 */
  width: 80%;
  max-width: 1000px;
  margin: 1em auto;
  min-height: 100vh; /* 特意给容器设置高度 */
}
 
.col-main {
  flex: 1 80%;  /* 给两栏布局 */
}
 
.col-sidebar {
  flex: 20%;  /* 给两栏布局 */
}
 
.affix {
  /* 给侧边栏菜单设置粘性定位,放在距视口顶部 1em 的位置 */
  position: sticky;
  top: 1em;
}

以上样式主要用于设置两栏布局。布局搞定后,affix 元素的粘性定位声明只需要两句就行了。其中 top 值指定了该元素最终固定的位置——距离视口顶部 1em

粘性定位元素永远不会超出父元素(本例中即为 col-sidebar 元素)的范围,随着页面的滚动,col-sidebar 会一直正常滚动,而 affix 元素则会在滚动到指定位置后停下来。如果继续滚动得足够远,粘性元素还会自行解锁恢复滚动。这种情况只在父元素的底边到达粘性菜单元素的底边时才会发生。注意,要让粘性元素能按预期粘性定位无误,父元素就必须高于粘性元素——这也是我给弹性容器手动设置 min-height 来增加其高度的根本原因。当父元素快要完全滚出视口时,一旦父元素底边碰到了粘性元素,那么该粘性元素将再次恢复滚动。


6.6 本章小结 Summary

  • 固定定位时放置元素的参照物为 视口(viewport)
  • 相对定位则以 该元素初始状态下的静态位置(initial static position)为参照物 进行定位;页面上的其他元素也将继续基于该初始位置排布。
  • 绝对定位时放置元素的参照物为 距离该元素最近的祖先级定位元素(nearest positioned ancestor element)
  • 粘性定位能让目标元素在页面其余内容滚动时固定在屏幕某个位置。它们将始终位于其父元素内部。
  • z-index 仅对 已定位的元素(positioned elements) (译注:即 position: relative | absolute | fixed | sticky)生效,并且使用时会创建一个新的 堆叠上下文(stacking context)


关于《CSS in Depth》(中译本书名《深入解析 CSS》)

第 1 版 第 2 版
读者评分 原版:4.7(亚马逊);中文版:9.3(豆瓣) 原版:5.0(亚马逊);中文版:暂无,待出版
出版时间 原版:2018 年 3 月;中文版:2020 年 4 月 原版:2024 年 7 月;中文版:暂无,待出版
原价 原版:$44.99;中文版:¥139.00 原版:$59.99;中文版:暂无,待出版
现价 原版:$36.49;中文版:¥52.54 起步 原版:$52.09;中文版:暂无,待出版
原版国内预订 起步价 ¥461.00 起步价 ¥750.00

本专栏为该书第 2 版高分译文专栏,全网首发,精译精校,持续更新,计划今年内完成全书翻译,敬请期待!!!