本周日,苏州开源盛宴,一起聊聊:Devops、K8s、数据库建模、SoLiD、.Net Core、微信开发、去中心化… 点击占座。
Watch 1 Star 1 Fork 1

子弹兄 / headroom.jsJavaScript

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
headroom是用纯Javascript写的插件,用来隐藏和展示页面元素,从而为页面留下更多空间。比如使用headroom能使导航栏当页面下滚时消失,当页面上滚时候又出现。 展开 收起

克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

#第103款插件:Headroom.js在不需要页头时将其隐藏

详情请看 http://www.ijquery.cn/?p=1353

headroom是用纯Javascript写的插件,用来隐藏和展示页面元素,从而为页面留下更多空间。比如使用headroom能使导航栏当页面下滚时消失,当页面上滚时候又出现。

用时一定要注意:首先需要引用headroom.js和jQuery.headroom.js。将以下的代码加入到你的代码中。

headroom.js作用:感应元素不同的状态为之更改相应的class。

jQuery.headroom.js作用:提供jquery插件方式和Data-API方式调用headrooom()。

心急的用户可直接看第六点。

一开始以为很简单,结果花了将近一上午和一中午的时间,才搞清楚,才总结出来这篇文章,其中有很多值得注意的地方!

为什么呢?注意的以下几点:

1、github上的src下的Headroom.js(第一个字母是大写)是个错误的,而 jQuery.headroom.js 是正确的,没有问题的;

2、网址示例http://wicky.nillia.ms/headroom.js/源代码中的main.js中有好几个插件,其中有一个插件是headroom.js,是v0.3而不是最新版v0.8。于是我总结出来了headroom.v0.3.js和headroom.v0.8.js两个插件。但目前还是建议用v0.7的,网址分别是:

http://cdn.bootcss.com/headroom/0.7.0/headroom.js

http://cdn.bootcss.com/headroom/0.7.0/jQuery.headroom.js

3、headroom.js必须放在jquery插件之后;

4、headroom.js单一插件使用后,可用 headroom.init(); 这个功能;

5、Headroom.js加jQuery.headroom.js 两个插件一起使用,才可用 $(“#header”).headroom(); 这个功能。

明白了以上注意点后,才可以熟练的运用此插件!!!

点评 ( 0 )

你可以在登录后,发表评论

搜索帮助

14_float_left_people 14_float_left_close