Stick 黏住
简介
黏住效果是网页设计中常见的，通常表现是：当浏览器向下滚动时，元素准备被卷掉的时候立即被视窗顶部吸附住。黏住效果用来表现常用的元素，比如：菜单，导航，个人信息等非常有用。本插件除了能满足常规黏住用法，还可用于其他更多场景。
运行条件
页面引入ax.css和ax.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; }
监听事件
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
sticked被吸附后执行，支持参数position：当前状态是fixed还是absoluteunsticked取消吸附后执行updated参数更新后执行
演示实例显示结果使用了console.log方法，请按下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({
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
refer: 'body',//参照元素。默认参照body黏住顶部，可选择'#ID'：参照指定元素
space: '0px',//黏住后距离顶部或底部的距离，单位px
width: '',//默认为空即为原宽，可选择具体宽度值'1200px'，或者'100%'
zIndex: '',//默认不设定z-index值
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"