• 注册
  • 网络编程
  • 今日 0
  • 帖子 12
  • 关注 1
  • 热门论坛

  • 玩游戏赚钱
    玩游戏赚钱
    游戏赚钱版块,提供可以赚钱的网络游戏,专注于挖掘电脑端游与手游赚钱方法。欢迎关注和阅读游戏赚钱分类的精彩内容。
  • 商机发布交流
    商机发布交流
    本站为本站会员提供DNF商机倒卖囤货发布交流
  • 网赚项目
    网赚项目
    为您免费提供网赚项目、最新赚钱项目,不收取任何费用,只要您用心就能赚到钱!
    • 支付宝
    • QQ
    • 微信

    游赚笔记坚持一个资源共享的理念来供应大家学习游赚网赚,也因此,游赚笔记不能像其他站一样来获得收益。如果你不想让本站倒闭,可以选择充值金币或者开通会员,如果你什么都不需要,你也可以扫上面的二维码,直接支持游赚笔记!(注:捐款时,请备注捐助后面跟上用户名,例:捐助-游赚笔记)

    点我加入本站交流群

    BBS JavaScript 关注:1 内容:12

    jquery页面滚动固定元素插件HC-Sticky

  • 查看作者
  • 打赏作者
  • 拉黑名单
  • 当前位置: 游赚笔记 > 网络编程 > JavaScript > 正文
    lv.25
    宇宙之主
    巴菲特

    HC-Sticky

    hc-sticky是一款jquery页面滚动固定元素插件。该插件可以跨浏览器使用,具有在页面滚动时将指定元素固定在窗口上的功能。该页面滚动固定元素插件有js版本和jquery版本。

    安装

    可以通过npm或bower来安装hc-sticky插件。

    npm: npm install --save hc-sticky
    bower: bower install --save hc-sticky

    使用方法

    在页面中引入jQuery和hc-sticky.js文件。

    <script src="js/jquery.min.js"></script>
    <script src="js/hc-sticky.js"></script>

    初始化插件

    该页面滚动固定元素插件分js版本和jQuery版本,初始化方法分别如下:

    js版本:

    var Sticky = new hcSticky('#element', {
      stickTo: '#content'
    });

    jQuery版本:

    jQuery(document).ready(function($) {
      $('#element').hcSticky({
        stickTo: '#content'
      });
    });

     配置参数

    该jquery页面滚动固定元素插件的可用配置参数有:

    参数 默认值 类型 描述
    top 0 int 目标元素固定在距离窗口顶部多少距离。
    bottom 0 int 目标元素固定在距离窗口底部多少距离。
    innerTop 0 int 固定元素内部距离元素顶部的距离。
    innerSticker null string / element object 在固定元素内部的元素,优先级比nnerTop高。
    bottomEnd 0 int 参考元素底部停止的距离。
    stickTo null(父元素) string / element object 固定元素附着的容器。
    followScroll true boolean 如果设置为false,在固定元素的高度大于窗口时将不会随着窗口滚动。
    stickyClass 'sticky' string 添加到滚动元素上的class类。
    queries null object 包含响应式断点的对象。
    onStart null function 当元素被固定时的回调函数。
    onStop null function 当元素停止跟随滚动时的回调函数。
    onBeforeResize null function 当固定元素尺寸被改变前触发。
    onResize null function 当固定元素尺寸被改变时触发。
    resizeDebounce 100 int Limit the rate at which the HC Sticky can fire on window resize.

    方法

    该jquery页面滚动固定元素插件的可用方法有:

    方法 接收值 描述
    options string 返回当前的配置。
    update object 更新配置参数。
    reinit N/A 重新计算固定元素的尺寸和位置。
    detach N/A 将HC-Sticky从元素上分离。
    attach N/A 将HC-Sticky附着到元素上。
    destroy N/A 销毁插件。

    代码下载:

    隐藏内容需要回复可以看见

    回复

    请登录之后再进行评论

    登录
  • 发表内容
  • QQ交流群DNF内部技术交流
  • 做任务
  • 实时动态
  • 返回顶部