Sticky 粘住

使用说明 PLUGIN

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

比可视区域低

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

<script src='https://src.axui.cn/v1.0/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/v1.0/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/v1.0/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/v1.0/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>