JavaScript库,使页面上的任何元素在滚动时都可见。

Posted

tags:

中文标题:JavaScript库,使页面上的任何元素在滚动时都可见。 原文标题:JavaScript library that makes any element on your page visible while you scroll. 项目评级:Star:449      Fork:114 下载地址:https://github.com/somewebmedia/hc-sticky 详情介绍

HC粘性

JavaScript库,使页面上的任何元素在滚动时都可见。不依赖,但lso可以作为jQuery插件使用。

查看演示。

快速启动

安装

此软件包可以与以下组件一起安装:

或者下载最新版本。

包括HC粘性

脚本标记

Webpack/浏览器化

在脚本中,包括HC Sticky通常看起来是这样的:

巴别塔

AMD(异步模块定义)

如果使用AMD,模块将自动定义为hcSticky

用法

一旦您的元素在DOM中可用,请务必调用HC Sticky。

香草JS

jQuery公司

为了让HC Sticky作为jQuery插件工作,jQuery必须是全局window对象的属性,所以在与Babel/Webpack/Browserify和jQuery组合使用时要小心。

选项

HC Sticky有一系列选项,您可以设置这些选项来完全控制粘性元素。

<表格>

属性

默认

类型

描述

top

0个

整数

窗口顶部到触发HC粘滞的距离

bottom

0个

整数

距离窗口底部的距离,在该距离处附着HC Sticky

innerTop

0个

整数

从粘性元件顶部内侧到触发HC粘性的距离

innerSticker

无效

字符串/元素对象

粘性元件内部的元件,用于连接HC粘性。这比innerTop选项具有更高的优先级

bottomEnd

0个

整数

从参考元件底部到停止HC粘滞的距离

stickTo

null(父元素)

字符串/元素对象

元素,该元素表示容器的高度而不是高度的引用

followScroll

真实的

布尔值

当设置为false时,如果粘性内容大于<em>窗口

stickyClass

“粘性”

字符串

HTML类,该类将在粘性元素被附加时应用于粘性元素

responsive

无效

对象

对象,该对象包含响应断点,您可以在该断点上告诉HC Sticky要做什么

mobileFirst

虚假的

布尔值

响应查询的方向

disable

虚假的

布尔值

禁用插件。通常与响应对象一起使用

onStart

无效

函数

当元素被附加时,回调函数被激发

onStop

无效

函数

元素停止浮动时激发的回调函数

onBeforeResize

无效

函数

在调整粘性大小之前触发的回调函数(发生在窗口调整大小之后和粘性重新调整之前)

onResize

无效

函数

调整粘性大小后触发的回调函数(发生在窗口调整大小并重新调整粘性之后)

resizeDebounce

100

整数

限制HC Sticky在调整窗口大小时可以发射的速率

关于如何在此处使用响应对象的更多信息。

方法

方法用于在初始化后控制插件。

<表格>

方法

接受

描述

options

字符串

返回当前设置,或指定的特定设置

update

对象

使用新设置更新设置

refresh

不适用

重新计算粘性大小和位置。在更改粘性内部的DOM元素后很有用

detach

不适用

将HC Sticky从元件上拆下,防止其运行

attach

不适用

将HC Sticky粘贴回图元

destroy

不适用

完全破坏HC粘性并将元件恢复到原始状态

香草JS

jQuery公司

开发人员大楼

这个包裹随Gulp一起提供。以下任务可用:

您可以传递一个<code>--dev

代码>命令,如果您不希望编译后的JS被缩小。

许可证

代码和文档是根据麻省理工学院许可证发布的。

如何使滚动视图上的页面自动旋转?

当softKeyBoard隐藏按钮和其他元素时如何使布局可滚动[ANDROID]

如何使DIV的高度固定,当超出固定高度时,出现自动滚动条

滚动脚本上的动画更改徽标大小会导致库冲突或其他一些加载问题

使用CSS和JavaScript创建基本的视差滚动效果

javascript前台开发问题,怎么设置使页面的滚动条不滚动,看详细描述