我们承诺每页只显示一个小广告。别担心，隐藏此消息将确保你不会再次被烦扰。
简介
固定内容在页面上显示另一列内容时会固定到浏览器视窗。
虽然固定内容可以在任何容器内使用，但固定与 ui rail 配合使用效果很好，因为“固定”内容通常用于占据网站主要内容之外的额外画布空间，从而确保后续链接、广告和其他辅助内容在用户参与网站主要内容时仍然保留在屏幕上。
示例
固定到相邻上下文
固定内容在被传递时会附加到视窗，并保持固定到视窗，直到此固定内容与传递的 context 底部边缘碰撞。附加的静态内容可以存在于 sticky 内容之上，而不会影响其位置。
$('.ui.sticky') .sticky({ context: '#example1' }) ;
固定内容
固定内容
推挤
指定 pushing: true 将使视窗根据滚动方向“推挤”固定内容。向下滚动时，内容将固定到视窗顶部，但在相反的方向上，内容将固定到视窗底部。
$('.ui.sticky') .sticky({ context: '#example2', pushing: true }) ;
固定内容
固定内容
超大内容
大于视窗的固定内容将自动独立于上下文滚动，随时更改滚动方向也会立即调整固定内容的滚动位置。
此行为确保用户无需一直导航到上下文元素的顶部才能看到无法在固定元素内屏幕上显示的内容。
$('.ui.sticky') .sticky({ context: '#example3' }) ;
固定到自身上下文
没有指定上下文的固定内容也可以固定到其当前上下文，但这可能会导致与内容重叠的问题。
固定到自身上下文的固定内容会在“固定”时调整自身布局。可以通过在 ui fixed sticky 之后的下一个元素中添加样式来修复此重排导致的布局问题
.ui.fixed.sticky + p { margin-top: 39px; }
$('.ui.sticky') .sticky() ;
用法
初始化
固定在应固定到视窗的内容上初始化。大多数情况需要指定一个辅助的 context，它将定义固定元素的顶部和底部边界。固定内容必须包含在包含元素内。此容器可以是 ui 轨道 或者你自己的任意容器，但应该与你的上下文并行存在。
$('.ui.sticky') .sticky({ context: '#context' }) ;
刷新缓存值
固定内容在其初始化时缓存其在页面上的当前偏移量和其他重要值。这可以防止它在每次浏览器滚动时查询 DOM，这将大大降低性能。
固定使用 变异观察器 来调整其位置，当内容添加到上下文时，还会在浏览器 resize 时自动重新计算，但页面上任何其他更改上下文元素的布局都需要你刷新固定的位置。
可能会影响固定元素的更改示例是
加载没有指定大小的图像
设置调整页面布局的 CSS
使用 Javascript 隐藏元素
刷新缓存值只需要调用 refresh 行为。
// 重新计算偏移量 $('.ui.sticky') .sticky('refresh') ;
固定条件
固定内容需要在其自身的 position: relative 容器内，该容器要么是固定上下文，要么与上下文元素共享垂直定位。
可以使用 ui rail 或 ui grid 列，它们位于同一行中，以提供此设置，或者使用你自己的自定义 CSS。
固定元素会在绑定到其容器的边缘或固定到浏览器视窗的边缘之间切换。
| 类 | 描述 | |
|---|---|---|
| 固定顶部 | ui fixed top sticky | 元素固定到视窗顶部。 |
| 固定底部 | ui fixed bottom sticky | 元素固定到视窗底部。 |
| 绑定顶部 | ui bound top sticky | 元素绑定到其包含元素（通常是轨道或列）的顶部。 |
| 绑定底部 | ui bound bottom sticky | 元素绑定到其包含元素（通常是轨道或列）的底部。 |
调整偏移量和填充
如果你有内容固定到视窗，那么将一个顶部或底部偏移量包含在内可能是有意义的。offset 将调整所有值，以便内容不会与浏览器顶部和指定值之间的任何内容重叠。bottomOffset 对于固定到视窗底部的内容将执行相同的操作。
$('.ui.sticky') .sticky({ offset : 50, bottomOffset : 50, context : '#element-to-follow' }) ;
固定设置配置固定行为的设置。
| 设置 | 默认 | 描述 |
|---|---|---|
| pushing | false | 元素是否应该被视窗“推挤”，在向上滚动时附加到屏幕底部。 |
| setSize | true 2.2.11 版新增内容 |
将 fixed 内容的大小设置为与其宽度匹配，然后动态地固定到屏幕。这是因为固定可能会以不同于固定之前显示块或 100% 宽度内容的方式显示。 |
| jitter | 5 | 只有当容器和上下文高度之间的差异大于此抖动值时，才会设置固定容器高度。 |
| observeChanges | false | context DOM 中的任何更改是否应该自动刷新缓存的固定位置。 |
| context | false | 固定元素应固定到的上下文。 |
| scrollContext | window | 固定应附加 onscroll 事件的上下文。 |
| offset | 0 | 将元素固定到视窗时，距离屏幕顶部的像素偏移量 |
| bottomOffset | 0 | 将元素固定到视窗时，距离屏幕底部的像素偏移量 |
回调函数
回调函数指定在特定行为发生后要执行的函数。
| 上下文 | 描述 | |
|---|---|---|
| onReposition | $module | 元素由于布局更改而重新定位时的回调函数。 |
| onScroll | $module | 从滚动处理程序中触发 requestAnimationFrame 时的回调函数。 |
| onStick | $module | 元素固定到页面时的回调函数。 |
| onUnstick | $module | 元素从页面取消固定时的回调函数。 |
| onTop | $module | 元素绑定到父容器顶部时的回调函数。 |
| onBottom | $module | 元素绑定到父容器底部时的回调函数。 |
DOM 设置DOM 设置指定此模块应如何与 DOM 交互。
| 设置 | 默认 | 描述 |
|---|---|---|
| 命名空间 | sticky | 事件命名空间。确保模块拆卸不会影响附加到元素的其他事件。 |
| 类名 |
className : { bound : 'bound', fixed : 'fixed', supported : 'native', top : 'top', bottom : 'bottom' }
|
用于将样式附加到状态的类名。 |
调试设置调试设置控制调试输出到控制台。
| 设置 | 默认 | 描述 |
|---|---|---|
| 名称 | 固定 | 调试日志中使用的名称。 |
| 静默 | False | 静默所有控制台输出，包括错误消息，无论其他调试设置如何。 |
| 调试 | False | 将标准调试输出提供到控制台。 |
| 性能 | True | 将标准调试输出提供到控制台。 |
| 详细 | True | 将辅助调试输出提供到控制台。 |
| 错误 |
error : { container : '粘性元素必须位于一个相对容器内', visible : '元素处于隐藏状态，必须在元素可见后调用刷新', method : '您调用的方法未定义。', invalidContext : '指定的上下文不存在', elementSize : '粘性元素大于其容器，无法创建粘性。' }
|
|