我们承诺每页最多显示一个小型广告。别担心，隐藏此消息将确保您不会再次被烦扰。
介绍
可见性提供了一组回调函数，可以附加到任何元素，并在发生特定可见性事件时触发。
将事件附加到可见性有多种用途。以下是一些更常见的用途。
无限滚动
当用户部分完成滚动浏览内容时，您想开始将更多内容加载到容器中。
延迟加载图片
您想在图片即将对用户可见时开始加载它。
响应式内容
您希望元素根据用户滚动的距离进行改变。
粘性标题
您希望元素在经过时固定到视窗，并在之后返回到原始静态位置。
事件跟踪
您想附加与用户与内容的互动相匹配的分析事件，例如，当博客文章被阅读 30% 时记录到 Google Analytics。
使用
使用方法
可见性提供了一组回调函数，可用于将事件附加到元素在屏幕上的位置。
每次滚动更改都会触发一个动画帧请求，该请求将为元素触发回调函数。
// 一些示例回调 $('.demo.segment') .visibility({ onTopVisible: function(calculations) { // 顶部在屏幕上 }, onTopPassed: function(calculations) { // 元素顶部已通过 }, onUpdate: function(calculations) { // 只要计算调整就执行某些操作 updateTable(calculations); } }) ;
| 计算 | 值 |
|---|---|
| pixelsPassed | |
| percentagePassed | |
| fits | |
| width | |
| height | |
| onScreen | |
| offScreen | |
| passing | |
| topVisible | |
| bottomVisible | |
| topPassed | |
| bottomPassed |
更改回调频率
可见性的默认设置只会让每个回调函数在满足条件的第一次时发生。在随后的情况下，事件不会触发。
设置 continuous: true 将使回调函数在满足回调条件的任何时候触发。例如，如果您设置了一个“顶部可见”回调函数，则此回调函数将在每次滚动更改时触发，只要顶部在页面上可见。
设置 once: false 将使回调函数在每次回调变为真时触发。因此，使用相同的“顶部可见”示例，只要元素的顶部通过，回调函数就会触发。即使您向上滚动并再次通过元素也是如此。
事件日志
回调
回调函数分为两类。标准事件将在条件计算为真的第一个动画帧中发生。
标准事件
| 事件 | 发生 | 伪代码 |
|---|---|---|
| onOnScreen | 元素的任何部分都在当前滚动视窗中 |
screen.bottom >= element.top && screen.bottom <= element.bottom
|
| onOffScreen | 元素的任何部分都不在当前滚动视窗中 |
screen.bottom <= element.top || screen.top >= element.bottom
|
| onTopVisible | 元素的顶边已超过屏幕底部 |
screen.bottom >= element.top
|
| onTopPassed | 元素的顶边已超过屏幕顶部 |
screen.top >= element.top
|
| onBottomVisible | 元素的底边已超过屏幕底部 |
screen.bottom >= element.top
|
| onPassing | 元素的任何部分都在屏幕上可见 |
screen.bottom >= element.top && screen.top < element.bottom
|
| onBottomPassed | 元素的底边已超过屏幕顶部 |
screen.top >= element.bottom
|
分组事件
onPassed 允许您指定一组回调函数，这些回调函数在元素通过不同百分比或像素后发生。
| 事件 | 发生 | 示例 |
|---|---|---|
| onPassed {} | 已通过元素内容顶部的距离，以百分比或像素表示。 |
onPassed: { 40: function() { // 通过 40 像素时执行某些操作。 }, '80%': function() { // 在 80% 时执行某些操作 } }
|
反向事件
反向事件将在相同条件下发生，但当用户向上滚动页面时发生。
| 事件 | 发生 | 伪代码 |
|---|---|---|
| onTopVisibleReverse | 元素的顶边未超过屏幕底部 |
screen.bottom >= element.top
|
| onTopPassedReverse | 元素的顶边未超过屏幕顶部 |
screen.top >= element.top
|
| onBottomVisibleReverse | 元素的底边未超过屏幕底部 |
screen.bottom >= element.top
|
| onPassingReverse | 元素的顶部未超过屏幕顶部，但底部已超过 |
screen.bottom >= element.top && screen.top < element.bottom
|
| onBottomPassedReverse | 元素的底边未超过屏幕顶部 |
screen.top >= element.bottom
|
行为
可见性包含一些用于与组件交互的有用行为。
| 行为 | 使用 |
|---|---|
| 禁用回调函数 | 暂时禁用回调函数。如果您需要调整滚动位置，并且不想在位置更改期间触发回调函数，这很有用。 |
| 启用回调函数 | 重新启用回调函数 |
| 是否在屏幕上 | 返回元素是否在屏幕上 |
| 是否不在屏幕上 | 返回元素是否不在屏幕上 |
| 获取已通过的像素 | 返回从元素顶部开始，当前元素已通过的像素数。 |
| 获取元素计算 | 将元素计算作为对象返回。 |
| 获取屏幕计算 | 将屏幕计算作为对象返回。 |
| 获取屏幕大小 | 将屏幕大小作为对象返回。 |
示例
无限滚动
作为分页的替代方法，您可以使用 onBottomVisible 在容器底部到达时自动加载内容。
$('.infinite.example .demo.segment') .visibility({ once: false, // 加载新内容时更新大小 observeChanges: true, // 在底部边缘可见时加载内容 onBottomVisible: function() { // 最多加载 5 次 window.loadFakeContent(); } }) ;
无限滚动示例
正在添加更多内容...
延迟加载图片
可见性包含一些用于设置常见可见性事件的快捷方式。使用设置 type: 'image' 将自动将事件附加到图片的 topVisible，以将 data-src 的内容作为 src 加载。
您可以将占位符图片指定为当前 src，以确保图片加载时内容不会跳动，或者您可以不指定占位符，让图片出现。
默认情况下，图片将没有任何动画出现，但是您也可以指定命名的 过渡 和用于对图片进行动画到视图的持续时间。
$('.demo.items .image img') .visibility({ type : 'image', transition : 'fade in', duration : 1000 }) ;
Elliot Fu
Helen Troy
Jenny Hess
Veronika Ossi
Stevie
Steve Jobes
Ade
Chris
Joe Henderson
Laura
渐进变化
每个回调函数都会将所有计算的值作为其第一个参数，允许您使用它来调整元素。
$('.changing.example .demo.segment') .visibility({ once : false, continuous : true, onPassing : function(calculations) { var newColor = 'rgba(0, 0, 0, ' + calculations.percentagePassed +')'; $(this) .css('background-color', newColor) ; } }) ;
将内容固定到视窗
Visibility 提供了一种轻量级的方法，用于将内容固定到页面的视窗。使用 type: fixed 将在元素通过视窗后添加 fixed 类。使用这个类名，您可以在元素通过后为其分配特殊的布局条件。
使用特殊的 visibility 类型 fixed 会自动创建一个占位符元素，该元素将在元素通过后显示或隐藏，以确保页面位置在元素“固定”并从正常的布局流程中移除时不会改变。
在这个示例中，当元素通过时，我们将它固定到视窗，添加背景颜色和框阴影，以便它可以浮动在其他内容之上。我们还显示了一个相邻的占位符元素，它确保内容保持与菜单仍在内容流中时相同的偏移。
$('.overlay.example .overlay') .visibility({ type : 'fixed', offset : 15 // 给屏幕顶部留出一些空间 }) ;
.visibility.example .overlay { background-color: #FFFFFF; padding: 0em; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); transition: all 0.5s ease; background: transparent; } /* 更改样式 */ .visibility.example .fixed.overlay { position: fixed; padding: 1em; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
设置
功能配置 visibility 行为的设置
| 设置 | 默认值 | 描述 |
|---|---|---|
| once | true | 当设置为 false 时，回调函数会在元素每次通过条件的阈值时发生。 |
| continuous | false | 当设置为 true 时，回调函数会在元素每次通过条件时发生，而不仅仅是在满足阈值后立即发生。 |
| type | false | 设置为 image 以在屏幕上加载图像。设置为 fixed 以在元素通过时添加 fixed 类名。 |
| initialCheck | true | 是否应在初始化时立即检查 visibility 条件。 |
| context | window | visibility 应该使用的滚动上下文。 |
| refreshOnLoad | true | 是否应在窗口 load 时检查 visibility 条件。这确保在图像加载后，内容位置将被正确更新。 |
| refreshOnResize | true | 是否应在窗口 resize 时检查 visibility 条件。当内容大小调整导致位置发生持续变化时很有用。 |
| checkOnRefresh | true | 是否应在调用 refresh 时检查 visibility 条件。这些调用可以从 resize、load 或手动调用 $('.foo').visibility('refresh') 中触发。 |
| zIndex | 1 | 使用 type: 'fixed' 时指定 z-index。2.2 中的新功能 |
| offset | 0 | 上下文 scrollTop 应该以像素调整的值。有助于使内容出现在固定到页面的内容下方。 |
| includeMargin | false | 元素计算是否应包含其边距。 |
| throttle | false | 当设置为整数时，滚动位置将使用此 ms 值进行去抖动。false 将使用 requestAnimationFrame 进行去抖动。 |
| observeChanges | true | 是否在元素的 DOM 子树发生变化时自动刷新内容。 |
| transition | false | 当使用 type: image 时，允许您指定显示已加载图像时的过渡。 |
| duration | 1000 | 当使用 type: image 时，允许您指定过渡持续时间。 |
Visibility 回调函数
在命名 visibility 事件上发生的回调函数
| 上下文 | 描述 | |
|---|---|---|
| onTopVisible | $element | 元素的顶边已超过屏幕底部 |
| onTopPassed | $element | 元素的顶边已超过屏幕顶部 |
| onBottomVisible | $element | 元素的底边已超过屏幕底部 |
| onPassing | $element | 元素的任何部分都在屏幕上可见 |
| onBottomPassed | $element | 元素的底边已超过屏幕顶部 |
| onTopVisibleReverse | $element | 元素的顶边未超过屏幕底部 |
| onTopPassedReverse | $element | 元素的顶边未超过屏幕顶部 |
| onBottomVisibleReverse | $element | 元素的底边未超过屏幕底部 |
| onPassingReverse | $element | 元素的顶部未超过屏幕顶部，但底部已超过 |
| onBottomPassedReverse | $element | 元素的底边未超过屏幕顶部 |
图像回调函数2.2 中的新功能
仅在使用 type: 'fixed' 时发生的回调函数
| 上下文 | 描述 | |
|---|---|---|
| onLoad | img | 在图像完成加载后发生。 |
| onAllLoaded | 最后加载的 img | 在所有在同一时间初始化的 img 加载完毕后发生。 |
固定回调函数2.2 中的新功能
仅在使用 type: 'fixed' 时发生的回调函数
| 上下文 | 描述 | |
|---|---|---|
| onFixed | $element | 在元素被分配 position fixed 后发生。 |
| onUnfixed | $element | 在元素从固定位置移除后发生。 |
实用程序回调函数
在命名 visibility 事件上发生的回调函数
| 上下文 | 描述 | |
|---|---|---|
| onUpdate(calculations) | $element | 每次元素的计算更新时都会发生。 |
| onRefresh | $element | 只要元素的 visibility 被刷新就会发生。 |
DOM 设置DOM 设置指定此模块应如何与 DOM 交互。
| 设置 | 默认值 | 描述 |
|---|---|---|
| namespace | visibility | 事件命名空间。确保模块拆卸不会影响附加到元素的其他事件。 |
| className |
className : { fixed : 'fixed', }
|
用于将样式附加到状态的类名。 |
调试设置调试设置控制调试输出到控制台。
| 设置 | 默认值 | 描述 |
|---|---|---|
| name | 可见性 | 调试日志中使用的名称。 |
| silent | False | 静默所有控制台输出，包括错误消息，无论其他调试设置如何。 |
| debug | False | 向控制台提供标准调试输出。 |
| performance | True | 向控制台提供标准调试输出。 |
| verbose | True | 向控制台提供辅助调试输出。 |
| errors |
error : { method : 'The method you called is not defined.', }
|
|