美文网首页
导航 headroom详细使用方法

导航 headroom详细使用方法

作者: 方_糖 | 来源:发表于2018-10-12 15:03 被阅读0次

    headroom官网(中文版):http://www.bootcss.com/p/headroom.js/
    headroom官网(国外版):http://wicky.nillia.ms/headroom.js/
    headroom在线使用地址:https://npmcdn.com/headroom.js@0.9.4/dist/headroom.js
    headroom--Playroom:http://wicky.nillia.ms/headroom.js/playroom/

    想实现这样的效果吗(当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了。)

    Playroom.gif

    那就先实现这样的效果吧

    easy.gif

    一 . 简单的headroom使用

    1.使用纯JS来写

    HTML部分
    <div class="header" id="header"></div>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
    
    CSS部分
    <style>
        .header{
          width:100%;
          height: 60px;
          background-color: red;
        }
        /* headroom改变时不同的样式 ,可以自由设置*/
        .headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
        .headroom--unpinned {top: -100px;}
        .headroom--pinned {top: 0;}
      </style>
    
    JS部分
    <script  type="text/javascript"  src="https://npmcdn.com/headroom.js@0.9.4/dist/headroom.js"></script>
    <!--注意:js一定要写在body的后面,因为要使用body里面的元素 -->
    <script>
      var myElement = document.querySelector("#header");
      var headroom  = new Headroom(myElement);
      headroom.init();
    </script>
    
    完整代码
    <html>
    <head>
      <meta charset="utf-8" />
      <script  type="text/javascript"  src="https://npmcdn.com/headroom.js@0.9.4/dist/headroom.js"></script>
      <style>
        .header{
          width:100%;
          height: 60px;
          background-color: red;
        }
        /* headroom改变时不同的样式 ,可以自由设置*/
        .headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
        .headroom--unpinned {top: -100px;}
        .headroom--pinned {top: 0;}
      </style>
    </head>
    <body>
      <div class="header" id="header"></div>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      <h1>1</h1>
      .......
    </body>
    
    <!--注意:js一定要写在body的后面,因为要使用body里面的元素 -->
    <script>
      var myElement = document.querySelector("#header");
      var headroom  = new Headroom(myElement);
      headroom.init();
    </script>
    </html>
    
    

    2.使用JQuery来写

    HTML和CSS部分没有变化
    JS部分
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
     <script  type="text/javascript"  src="headroom.js"></script>
     <script  type="text/javascript"  src="jQuery.headroom.js"></script>
     <!--注意:js一定要写在body的后面,因为要使用body里面的元素 -->
     <script>
     $("#header").headroom();
     </script>
    

    二 . 实现不同效果的的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即可

    三.结语

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

    相关文章

      网友评论

          本文标题:导航 headroom详细使用方法

          本文链接:https://www.haomeiwen.com/subject/jcnwaftx.html