Sticky 粘住

使用说明 PLUGIN

hc-sticky.js插件是优秀的黏住插件,它可以实现以父层为目标粘住滚动。本框架使用的版本是v2.2.3。详见github或在线演示DEMO。本框架版本未做任何修改,以下列举常见用法:

比可视区域低

如果粘住区域高度小于可视区域,而且高度小于父层,当父层进入不可视区域,粘住区域会黏住可视区域顶部。演示效果中注意观察右侧。

  • <script src='https://src.axui.cn/src/plugins/hc-sticky/hc-sticky.min.js'></script>
      <script type="text/javascript">
        var Sticky = new hcSticky('.right', {
          stickTo: 'main'
        });
    </script>
                            
  • <style>
      header,footer{
        height:60px;
        background-color: rgba(0,0,0,.04);
        z-index: 2;
      }
      main{
       width:80%;
       margin:14px auto;
    
      }
      .left{
          width:calc(100% - 214px);
          background-color: rgba(0,0,0,.04);
          float: left;
      }
      .right{
        width:200px;
        background-color: rgba(0,0,0,.04);
          float: right;
    
      }
       section{
            height:100px;
            background-color: rgba(0,0,0,.04);
            margin:10px;
        }
    </style>
                                        
  • <header></header>
    <main>
        <div class="left">
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
        </div>
        <div class="right">
            <section></section>
            <section></section>
        </div>
        <div class="ax-clear"></div>
    </main>
    <footer></footer>
                                        

比可视区域高

如果粘住区域高度大于可视区域,而且高度小于父层,粘住区域会随父层滚动直到粘住区域底部,而后会粘住可视区域底部,直到父层全部显示完毕。演示效果中注意观察右侧。

  • <script src='https://src.axui.cn/src/plugins/hc-sticky/hc-sticky.min.js'></script>
      <script type="text/javascript">
        var Sticky = new hcSticky('.right', {
          stickTo: 'main'
        });
    </script>
                            
  • <style>
      header,footer{
        height:60px;
        background-color: rgba(0,0,0,.04);
        z-index: 2;
      }
      main{
       width:80%;
       margin:14px auto;
    
      }
      .left{
          width:calc(100% - 214px);
          background-color: rgba(0,0,0,.04);
          float: left;
      }
      .right{
        width:200px;
        background-color: rgba(0,0,0,.04);
          float: right;
    
      }
       section{
            height:100px;
            background-color: rgba(0,0,0,.04);
            margin:10px;
        }
    </style>
                                        
  • <header></header>
    <main>
        <div class="left">
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
        </div>
        <div class="right">
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
        </div>
        <div class="ax-clear"></div>
    </main>
    <footer></footer>
                                        

外部固定顶部

引入另外一个粘住插件sticky.js,该插件在github上很受欢迎,用法也比较简单。本框架使用的版本是v1.0.4。详见github官网。本框架版本未做任何修改。

  • <script src='https://src.axui.cn/src/plugins/sticky/jquery.sticky.min.js'></script>
    <script type="text/javascript">
          $(window).load(function(){
              $("nav").sticky({ topSpacing: 0 });
          });
    </script>
                            
  • <style>
      header,footer{
        height:60px;
        background-color: rgba(0,0,0,.04);
        z-index: 2;
      }
      header{
          margin-bottom:14px;
      }
      nav{
          margin-bottom:14px;
          height:60px;
          background-color: #ccc;
      }
      main{
       width:80%;
       margin:14px auto;
      }
      .left{
          width:calc(100% - 214px);
          background-color: rgba(0,0,0,.04);
          float: left;
      }
      .right{
          width:200px;
          background-color: rgba(0,0,0,.04);
          float: right;
    
      }
       section{
            height:100px;
            background-color: rgba(0,0,0,.04);
            margin:10px;
        }
    </style>
                                        
  • <header></header>
    <nav></nav>
    <main>
        <div class="left">
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
        </div>
        <div class="right">
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
        </div>
        <div class="ax-clear"></div>
    </main>
    <footer></footer>
                                        

内部固定顶部

与上例类似,注意使用widthFromWrapper:false属性,该属性默认是true,也就是宽度跟随父层的宽度。请观摩演示效果。

  • <script src='https://src.axui.cn/src/plugins/sticky/jquery.sticky.min.js'></script>
    <script type="text/javascript">
          $(window).load(function(){
              $(".sticky").sticky({ topSpacing: 0,widthFromWrapper:false });
          });
    </script>
                            
  • <style>
      header,footer{
        height:60px;
        background-color: rgba(0,0,0,.04);
        z-index: 2;
      }
      main{
       width:80%;
       margin:14px auto;
      }
      .left{
          width:calc(100% - 214px);
          background-color: rgba(0,0,0,.04);
          float: left;
      }
      .right{
          width:200px;
          background-color: rgba(0,0,0,.04);
          float: right;
    
      }
       section{
            height:100px;
            background-color: rgba(0,0,0,.04);
            margin:10px;
        }
       .sticky{
            background-color: #ccc;
        }
    </style>
                                        
  • <header></header>
    <main>
        <div class="left">
            <section></section>
            <section></section>
            <section class="sticky"></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
        </div>
        <div class="right">
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
            <section></section>
        </div>
        <div class="ax-clear"></div>
    </main>
    <footer></footer>