Headroom

headroom.js 和 animate.css

Installation

添加下面代码到 Gemfile:

gem 'headroom'

执行:

$ bundle

或者是执行:

$ gem install headroom

Usage

在application.js中引用:

//= require headroom #这里的headroom可以根据自己的情况选择 angular.headroom 、 angular.headroom.min 、headroom.min 、 jQuery.headroom 、jQuery.headroom.min

在application.css中引用:

//= require animate

或者

在application.coffee中引用:

#=require headroom #这里的headroom可以根据自己的情况选择 angular.headroom 、 angular.headroom.min 、headroom.min 、 jQuery.headroom 、jQuery.headroom.min

在application.scss中引用:

#=require animate

headroom.js配置和初始化:

    $(function(){
        var elem = document.querySelector("header");
        var headroom = new Headroom(elem, {
          "offset": 202,
          "tolerance": 3,
          "classes": {
            "initial": "animated",
            "pinned": "zoomIn",
            "unpinned": "zoomOut"
          }
        });
        headroom.init();
    })

官网例子

animate.css的使用方法

Contributing

1. Fork it ( https://github.com/[my-github-username]/headroom/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request