固定

Sticky 用于在滚动时保持固定位置，常用于侧边栏 widget 的吸附固定。它是围绕已有 DOM 工作的行为控制器。

UI Primitive

示例

点击展开查看详情

滚动查看固定和堆叠效果：

JavaScript
import { createSticky } from 'vanilla-jui';

JavaScript
const sticky = createSticky({  target: '.sidebar .widget',  top: 16,  gap: 16,});sticky.build();

target 可以是单个元素、CSS 选择器或元素数组。传入多个目标时，组件会按解析顺序从上到下计算：

JavaScript
createSticky({  target: [    document.querySelector('#toc'),    document.querySelector('#latest-posts'),  ],}).build();

createSticky(props)

字段	类型	默认值	说明
`target`	`string \| Element \| Node \| Array \| null`	`null`	需要设置 sticky 的目标元素
`parent`	`string \| Element \| Node \| null`	`null`	可选单一作用域，用于限制目标查询
`max`	`number`	`10`	当前实例最多允许管理的目标元素数量
`top`	`number`	`16`	第一项 sticky 的顶部偏移，单位 px
`gap`	`number`	`16`	多个 sticky 元素之间的间距，单位 px
`overflow`	`'destroy' \| 'ignore'`	`'destroy'`	超出 `max` 时的处理策略
`reactive`	`boolean`	`false`	是否观察父容器 DOM 变化并自动重新解析目标
`onReBuild`	`Function \| null`	`null`	每次重新计算 top 后触发，参数为当前 Sticky 实例

target 可以是单个元素、CSS 选择器或元素数组。传入多个目标时，组件会按解析顺序从上到下计算：

JavaScript
createSticky({  target: [    document.querySelector('#toc'),    document.querySelector('#latest-posts'),  ],}).build();

推荐在复杂布局中传入 parent 作用域，把 selector 查询限制在指定父级内。

max 控制当前实例最多管理多少个目标元素。超出时由 overflow 决定策略：

JavaScript
createSticky({  parent: '.sidebar',  target: '.widget',  max: 3,  overflow: 'destroy',}).build();

`overflow`	行为
`'destroy'`	保留当前实例解析结果中最后 `max` 个目标，忽略更早的目标
`'ignore'`	当前实例保持空状态，不修改目标元素

`Sticky 的 parent、targets 和原始 style 快照保存在闭包内，不作为公开 DOM map 暴露。

重新解析目标集合并返回当前实例。

说明：当前实例内每个目标的计算结果