Headroom js使用方法介绍

http://www.bootcss.com/p/headroom.js/
示例
1、通过CSS设置变化的三个样式

 .headroom {
        transition: transform 200ms linear;
        display: block;
        height: 300px;
        width: auto;
        background-color: red;
 }
 .headroom--pinned {
        transform: translateY(0%);
    }
 .headroom--unpinned {
        transform: translateY(-100%);
        background-color: green;
 }

通过class设置属性

2、通过js调用

//获取页面元素
var myElement=Document.querySelector("header");
var headroom=new Headroom(myElelemt);//Headroom为内置函数
headroom.init();

3、传参数

var headroom = new Headroom(elem, {
  "tolerance": 5,
  "offset": 205,
  "classes": {
    "initial": "animated",
    "pinned": "slideDown",
    "unpinned": "slideUp"
  }});
headroom.init();
// to destroy
headroom.destroy();