导航 headroom详细使用方法

headroom官网(中文版)：http://www.bootcss.com/p/headroom.js/
headroom官网(国外版)：http://wicky.nillia.ms/headroom.js/
headroom在线使用地址：https://npmcdn.com/[email protected]/dist/headroom.js
headroom–Playroom:http://wicky.nillia.ms/headroom.js/playroom/
##想实现这样的效果吗（当页面向下滚动时，导航条消失，当页面向上滚动时，导航条就出现了。）

那就先实现这样的效果吧

一 . 简单的headroom使用

1.使用纯JS来写

HTML部分

  
1
  
1
  
1
  
1
  
1
  
1

CSS部分

JS部分

完整代码

  
  
  


  

  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  .......

2.使用JQuery来写

HTML和CSS部分没有变化

JS部分

二 . 实现不同效果的的animate

到headroom.js中修改Headroom.options

(原始版)

Headroom.options = {
    tolerance : {
      up : 0,
      down : 0
    },
    offset : 0,
    scroller: window,
    classes : {
      pinned : 'headroom--pinned',
      unpinned : 'headroom--unpinned',
      top : 'headroom--top',
      notTop : 'headroom--not-top',
      bottom : 'headroom--bottom',
      notBottom : 'headroom--not-bottom',
      initial : 'headroom'
    }
  };

（修改版）

Headroom.options = {
    tolerance : {
      up : 0,
      down : 0
    },
    offset : 0,
    scroller: window,
    classes : {
      pinned : 'bounceInDown',
      unpinned : 'bounceOutUp',
      top : 'headroom--top',
      notTop : 'headroom--not-top',
      bottom : 'headroom--bottom',
      notBottom : 'headroom--not-bottom',
      initial : 'animated'
    }
  };

修改classes中的参数，然后对照使用CSS即可

三.结语

第二大点有不正确的地方还希望大家多多指教，希望和志同道合的朋友一起学习