Stick 黏住

简介

黏住效果是网页设计中常见的,通常表现是:当浏览器向下滚动时,元素准备被卷掉的时候立即被视窗顶部吸附住。黏住效果用来表现常用的元素,比如:菜单,导航,个人信息等非常有用。本插件除了能满足常规黏住用法,还可用于其他更多场景。

运行条件

页面引入ax.cssax.js即可使用。建议将js文件在文档底部引用。

                                <script src="https://src.axui.cn/src/js/ax.min.js" type="text/javascript"></script>
                                <link href="https://src.axui.cn/src/css/ax.css" rel="stylesheet" type="text/css">
                            

使用方法

插件运行方式有两种:

  • ax*属性:对将要黏住的元素使用axStick属性即可按默认参数运行插件。
  • js实例:通过new axStick('#ID')方式创建实例运行。
  • <header></header>
    <main>
        <div class="left">
            <section></section>
            <section></section>
            <section class="sticky" axStick></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>
                                            
  •     <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>
                                            

实例:被参照束缚

设定refer参数,该参数通常为自己的嫡系父。所实现的效果是:自己不会被立即卷掉,而是在最后时刻同参照元素一起卷掉。

  •                                         <header></header>
                                            <main>
                                              <div class="left">
                                                <section>
                                                  <figure axStick='refer:"section"' style="margin-left:0;"></figure>
                                                </section>
                                                <section>
                                                  <figure axStick='refer:"section"' style="margin-left:30%;"></figure>
                                                </section>
                                                <section>
                                                  <figure axStick='refer:"section"' style="margin-left:60%;"></figure>
                                                </section>
                                                <section></section>
                                                <section></section>
                                                <section></section>
                                              </div>
                                              <div class="right" axStick='refer:"main"'>
                                                <section></section>
                                                <section></section>
                                              </div>
                                              <div class="ax-clear"></div>
                                            </main>
                                            <footer></footer>
                                        
  • <style>
    header {
        height: 60px;
        background-color: rgba(0, 0, 0, .04);
        z-index: 2;
      }
      footer {
        height: 600px;
        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: 300px;
        background-color: rgba(0, 0, 0, .04);
        margin: 10px;
        position: relative;
      }
      figure {
        height: 200px;
        width: 30%;
        background-color: rgba(0, 0, 0, .04);
      }
    </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>
                                                    <section></section>
                                                    <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" axStick='refer:"main"'>
                                                    <section></section>
                                                    <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="ax-clear"></div>
                                            </main>
                                            <section></section>
                                            <section></section>
                                            <section></section>
                                            <footer></footer>
                                        
  • <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>
                                        

实例:黏住顶部

设置width为100%或者其他数值即可实现吸附顶部的通栏菜单。如果黏住元素已经在最外围,已经是全宽了则不用做任何设置了。

  •                                         <header></header>
                                            <nav axStick></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>
                                        
  • <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>
                                        

实例:更新参数

通过使用update方法更新插件参数。该方法有两个参数:

  • setting:将要更新的参数,举例:{width:'100%'}
  • callback:回调函数,可不填

举例说明:更新黏住元素全宽黏住顶部。

  • <header></header>
    <main>
        <div class="left">
            <section></section>
            <section></section>
            <section class="sticky" id="update"><a href="###" class="ax-btn ax-primary ax-sm" id="btnUpdate">更新</a></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>
                                            
  •                                             window.onload = function () {
                                                    let btnUpdate = document.querySelector('#btnUpdate');
                                                    let instanceUpdate = new axStick('#update');
                                                    btnUpdate.onclick = function(){
                                                       instanceUpdate.update({
                                                           width:'100%'
                                                       },function(){
                                                           alert('更新了!');
                                                       })
                                                    }
                                                };
                                            
  •                                             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;
                                                    }
                                            

监听事件

借鉴jQuery的写法,本插件有若干监听方法,基本写法是:instance.on('sticked',function(){});具体事件说明如下:

  • sticked 被吸附后执行,支持参数position:当前状态是fixed还是absolute
  • unsticked 取消吸附后执行
  • updated 参数更新后执行

请用F12打开浏览器控制台查看监听结果。

  • <header></header>
    <main>
        <div class="left">
            <section></section>
            <section></section>
            <section class="sticky" id="update"><a href="###" class="ax-btn ax-primary ax-sm" id="btnUpdate">更新</a></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>
                                            
  •                                             window.onload = function () {
                                                    let btnUpdate = document.querySelector('#btnUpdate');
                                                    let instanceUpdate = new axStick('#update');
                                                    btnUpdate.onclick = function(){
                                                       instanceUpdate.update({
                                                           width:'100%'
                                                       },function(){
                                                           alert('更新了!');
                                                       })
                                                    }
                                                };
                                            
  •                                             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;
                                                    }
                                            

参数选项

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new axStick({
        refer: 'body',//参照元素。默认参照body黏住顶部,可选择'#ID':参照指定元素
        space: '0px',//黏住后距离顶部或底部的距离,单位px
        width: '',//默认为空即为原宽,可选择具体宽度值'1200px',或者'100%'
        zIndex: '',//默认不设定z-index值
      });
});
                        

操作方法

名称 说明 参数说明 回调函数
init() 初始化 无参数 无回调函数
update(setting, callback) 更新所有参数 setting是用户自定义参数,是一个对象;callback是回调函数,可不填 function(){}
无参数
on(type, handler) 添加监听事件 type是监听事件,事件类型可看前文的:监听方法;handler是回调函数 function(position){}
position:当前状态下的position值,可不填
axInstance(axSticks, name) 获取实例并重新设定参数 axSticks是当页创建的所有实例;name是指插件元素axStick属性的name值 无回调函数
在回调函数中this均指向实例本身,所以在回调函数中可默认使用如下变量:
  • this:实例本身
  • this.targetDom:实例的Dom
  • this.options:实例的参数