组件
固钉 Affix
固钉组件：包裹的内容随页面滚动，到达偏移量后固定，页面继续滚动。语义就是普通的 `position: sticky`——固定相对于最近的*滚动*祖先，因此元素在可滚动面板内的行为与在页面上相同；父级 `overflow: hidden` 会裁剪固定效果。可以同时设置两个偏移量，内容会保持在这个范围内。
#基础用法
Passage 1 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 2 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 3 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 4 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 5 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 6 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 7 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 8 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 9 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 10 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 11 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 12 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 13 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 14 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 15 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
Passage 16 — the tools travel with the reader: once their row reaches the top of the page it stays there while the chapters move on underneath.
<script setup lang="ts">
import { Affix } from "@bysages/vue";
const passages = 16;
</script>
<template>
<div class="w-full">
<Affix>
<div
class="flex gap-3 items-center px-4 py-3 bg-surface-1 border border-border rounded-sm text-sm tracking-label"
>
<strong>Reading tools</strong>
<span class="text-tertiary">·</span>
<span>Contents</span>
<span>Print</span>
<span>Share</span>
</div>
</Affix>
<div class="pt-4">
<p v-for="n in passages" :key="n" class="leading-relaxed text-secondary">
Passage {{ n }} — the tools travel with the reader: once their row reaches the top of the
page it stays there while the chapters move on underneath.
</p>
</div>
</div>
</template>
Passage 1 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 2 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 3 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 4 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 5 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 6 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 7 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 8 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 9 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 10 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 11 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 12 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 13 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 14 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 15 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
Passage 16 — with both offsets given, the row holds its place inside the band between them: clear of the header, clear of the page's end.
<script setup lang="ts">
import { Affix } from "@bysages/vue";
const passages = 16;
</script>
<template>
<div class="w-full">
<Affix offset-top="var(--bs-space-12)" offset-bottom="var(--bs-space-4)">
<div
class="flex gap-3 items-center px-4 py-3 bg-surface-1 border border-border rounded-sm text-sm tracking-label"
>
<strong>Reading tools</strong>
<span class="text-tertiary">·</span>
<span>Contents</span>
<span>Print</span>
<span>Share</span>
</div>
</Affix>
<div class="pt-4">
<p v-for="n in passages" :key="n" class="leading-relaxed text-secondary">
Passage {{ n }} — with both offsets given, the row holds its place inside the band between
them: clear of the header, clear of the page's end.
</p>
</div>
</div>
</template>
#属性
#Affix
固钉组件：包裹的内容随页面滚动，到达偏移量后固定，页面继续滚动。语义就是普通的 position: sticky——固定相对于最近的滚动祖先，因此元素在可滚动面板内的行为与在页面上相同；父级 overflow: hidden 会裁剪固定效果。可以同时设置两个偏移量，内容会保持在这个范围内。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
offsetTop | String | "0px" | — |
offsetBottom | String | "0px" | — |