headroom.js插件使用方法

原文地址

http://blog.csdn.net/chenyulearn/article/details/19606751

1.什么是headroom.js？

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

2.工作原理

通过感应目标元素不同的3种状态（原始，下滚，上滚），为目标元素更改相应的class，通过相应的class的css样式的变化得到所要的效果。

3.如何使用

（以下的例子是基于bootstrap框架和jquery插件的，在bootstrap框架下可以快速写出导航栏navbar，然后以jquery插件方式对导航栏navbar调用headroom()。）

首先需要引用headroom.js和jQuery.headroom.js。将以下的代码加入到你的代码中。headroom.js作用：感应元素不同的状态为之更改相应的class。jQuery.headroom.js作用：提供jquery插件方式和Data-API方式调用headrooom()。