组件

Sticky 吸顶

吸顶工具条壳；也可直接用布局原语 pvs-sticky pvs-top-0。

吸顶条

文档

<div class="pvs-sticky-bar pvs-sticky-bar--shadow">
  <div class="pvs-container pvs-sticky-bar__inner">
    <span class="pvs-text-sm pvs-font-semibold">文档</span>
    <ul class="pvs-subnav pvs-subnav--pill" style="margin:0">
      <li class="pvs-subnav__item pvs-subnav__item--active">
        <a class="pvs-subnav__link" href="#">概述</a>
      </li>
      <li class="pvs-subnav__item">
        <a class="pvs-subnav__link" href="#">API</a>
      </li>
    </ul>
  </div>
</div>

浅底

浅底吸顶条 pvs-sticky-bar--muted

<div class="pvs-sticky-bar pvs-sticky-bar--muted">
  <div class="pvs-container pvs-sticky-bar__inner">
    <span class="pvs-text-sm">浅底吸顶条 pvs-sticky-bar--muted</span>
  </div>
</div>

布局原语

任意块级元素加 pvs-sticky pvs-top-0（见布局 · 定位）。

pvs-sticky pvs-top-0 — 滚动页面时吸顶

<div class="pvs-sticky pvs-top-0 pvs-p-3 pvs-border pvs-bg-surface pvs-z-10">
  <code>pvs-sticky pvs-top-0</code> — 滚动页面时吸顶</div>
    <div style="height:8rem">
    </div>

类名速查

类名	说明
`pvs-sticky-bar`	吸顶条壳
`pvs-sticky-bar__inner`	容器内 flex
`pvs-sticky-bar--shadow / --muted`	阴影 / 浅底
`pvs-sticky + pvs-top-0`	布局原语吸顶