headroom插件的使用

正常情况下，按照官网就能完成，

特殊其情况是不是发生在Windows中的滚动，而是任意区域。

/ 监听滚动事件的元素,默认为 `window`

scroller : someElement,

var myElement = document.querySelector("#bbc");scroller: myElement,

document.querySelector("#bbc"); 方法获取该节点元素，和$("#bbc"),不一样。

我的静态实例

<style type="text/css">.headroom--unpinned {position: fixed;z-index: 10;right: 0;left: 0;top: 0;
}
.headroom--not-top.headroom--not-bottom.headroom--pinned{position: fixed;z-index: 10;right: 0;left: 0;top: 0;
} .scrollspy-example {  height: 1200px;  overflow: auto;  position: relative;  }  </style>  </style><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><!-- <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> --><script src="https://cdn.bootcss.com/headroom/0.9.4/headroom.js"></script><script src="https://cdn.bootcss.com/headroom/0.9.4/jQuery.headroom.js"></script><script>$(function() {var myElement = document.querySelector("#bbc");$("#bbbx").headroom({offset : 20,classes: {// when element is initialised//initial: "x1",// when scrolling up//pinned: "x2",// when scrolling down//unpinned: "x3",// when above offset//top: "x4",// when below offset//notTop: "x5",// when at bottom of scoll area//bottom: "x6",// when not at bottom of scroll area//notBottom: "x7"},scroller : myElement,  })console.log($(window).height());})</script>
</head><body><div id="bbbs" style="height:120px;width:100%;background:pink;"></div>   <div id="bbc" style="height:600px;width:100%;background:#ddd;overflow: auto;"><div id="" style="height:2000px;width:100%;background:#9E9191;"><div id="bbbx" style="height:200px;width:100%;background:red;"></div></div></div>
</body></html>

下面是教程

中文：http://www.ijquery.cn/?p=1353

官网：http://wicky.nillia.ms/headroom.js/

https://github.com/WickyNilliams/headroom.js/

一个插件分开使用new:https://codepen.io/netgloo/pen/KmGpBL

报错;headroom.js this.scroller.addEventListener is not a function

转载于:https://my.oschina.net/u/3427060/blog/1555409

headroom插件的使用相关推荐

Headroom.js
下载 Development (3.7kB) Production (1.7kB) Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它 ...
阅读分析程序源代码的一些方法（转载整理）
前言最近项目组中有较多新成员需要阅读熟悉项目中已有的程序代码,好多成员一时间对项目代码摸不清头绪,这里在网络上收集了相关源代码阅读分析的一些方法,整理于此. 正文摘自(繁体中文Traditiona ...
headroom.js插件使用方法
1.什么是headroom.js? headroom是用纯Javascript写的插件,用来隐藏和展示页面元素,从而为页面留下更多空间.比如使用headroom能使导航栏当页面下滚时消失,当页面上滚时 ...
Headroom.js插件用法
一.Headroom.js是什么? Headroom.js是一个轻量级.高性能的JS小工具(不依赖不论什么工具库.),它能在页面滚动时做出响应. 此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时 ...
前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
docker build run 卡住_还在使用第三方Docker插件？SpringBoot官方插件真香！
SpringBoot实战电商项目mall(40k+star)地址:github.com/macrozheng/- 摘要为了方便为SpringBoot应用构建Docker镜像,我们经常会使用Maven ...
【工具】动图展示 60+ 个前端常用插件库合集
作者:寒青 https://segmentfault.com/a/1190000019151460 DataTables 官网:https://www.datatables.net/ DataTabl ...
html页面设计工具,8个新设计工具和网页插件分享
8个新设计工具和网页插件分享 Sponsor 很多网页设计师都身兼界面设计以及前端代码的职责,工作实在繁忙,所以我们经常使用一些辅助工具来加快和实现自己的项目.今天设计达人网小编整理8个新设计工具和插 ...
javascript功能插件大集合
[导读]:GitHub 上有一个 Awesome – XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架 ...

headroom插件的使用

headroom插件的使用相关推荐

最新文章

热门文章