移动端吸顶fixbar的解决方案详解
需求背景
经常会有这样的需求，当页面滚动到某一个位置时，需要某个页面元素固定在屏幕顶部，并且有时需要连续滚动吸顶。在PC端主要的实现是通过CSS的position:fixed属性，但是在移动端，尤其是在安卓端，存在诸多的兼容性问题。
问题
position：fixed给移动端带来的问题：
- IOS8在页面滚动时，吸顶不连续；页面滑动时，不见吸顶，页面滚动停止后，吸顶缓慢出现
- 滚动到顶部之后，会出现两个一样的吸顶,过一会才恢复正常。
- footer底部输入框focus状态，footer底部输入框被居中，而不是吸附在软键盘上部。
- iPhone4s&5/iOS6&7/Safari下，页面底部footer输入框失去焦点时，header定位出错。当页面有滚动动作时，header定位恢复正常。
- iPhone4/iOS5/Safari下，当页面发生跳转，再退回时，fixed区域消失，当内容获得焦点时，fixed区域才显示。
- 安卓低版本／自带浏览器，不支持fixed属性，iOS4也是不支持fixed的。
- 三星i9100(S2)/自带浏览器，在滚屏过程中，fixed定位异常，touchend之后恢复正常。
- 部分低版本Android对支持不好，videoposter属性设置的封面图会遮挡fixed元素。
- QQ、UC浏览器滚动页面时footer定位错误，会往上偏移，是由于地址栏收起的缘故。
- *remind：不要在fixed元素中使用input/textarea元素。
解决方案
分别处理各个问题：
IOS
在IOS端，使用position：sticky这个属性，使用类似于position:relative和position:absolute的结合体。在目标区域在屏幕中可见时，它的行为就像position:relative;而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。
使用时，需要加上私有前缀
position:-webkit-sticky; position:-moz-sticky; position:-ms-sticky; position:sticky;
对于position：sticky的使用，需要注意很多的细节，sticky满足以下条件才能生效：
1、具有sticky属性的元素，其父级高度必须大于sticky元素的高度。
2、sticky元素的底部，不能和父级底部重叠。（这条不好表述，文后详细说明）
3、sticky元素的父级不能含有overflow:hidden和overflow:auto属性
4、必须具有top，或bottom属性。
同时要注意，sticky元素仅在他父级容器内有效，超出容器范围则不再生效了。
安卓
滚动距离超过某位置时，js动态设置样式；为了防止惯性滚动引起的fix不及时的情况，在touchstart、touchmove、touchend事件都进行监听。
//注意处理遮罩层的位置
varscrollHandler=function(){
if(topLength
不支持sticky
如果浏览器不支持position:sticky，那么就使用js动态的在节点在fixed定位于static定位中切换，但是需要对切换过程做一些优化。
1、使用函数节流防抖减少dom操作频繁粗发，但是保证在规定时间内必须执行一次。
2、使用window.requestAnimationFrame方法在下一帧前触发浏览器的强制同步布局，是对dom的操作能及时渲染到页面上。
3、减少对dom的读写操作，或者把dom操作把读、写操作分开，可以减少渲染次数。
原文代码
(function(){
functionSticky(){
this.init.apply(this,arguments);
}
/**
*滚动fixed组件初始化
*@param{object}settingallocate传进来的参数
*@param{object}setting.stickyNode需要设置position:sticky的节点，通常是最外层
*@param{object}setting.fixedNode当滚动一定距离时需要fixed在顶部的节点
*@param{int}setting.topfixed之后距离顶部的top值
*@param{int}setting.zIndexfixed之后的z-index值
*@param{string}setting.fixedClazzfixed时给fixedNode添加的类
*@param{function}setting.runInScrollFn滚动期间额外执行的函数
*@return{void}
*/
Sticky.setting={
stickyNode:null,
fixedNode:null,
top:0,
zIndex:100,
fixedClazz:'',
runInScrollFn:null
};
varsPro=Sticky.prototype;
varg=window;
/**
*初始化
*@param{object}options设置
*@return{void}
*/
sPro.init=function(options){
this.setting=$.extend({},Sticky.setting,options,true);
if(options.fixedNode){
this.fixedNode=options.fixedNode[0]||options.fixedNode;
this.stickyNode=options.stickyNode[0]||options.stickyNode;
this.cssStickySupport=this.checkStickySupport();
this.stickyNodeHeight=this.stickyNode.clientHeight;
this.fixedClazz=options.fixedClazz;
this.top=parseInt(options.top,10)||0;
this.zIndex=parseInt(options.zIndex)||1;
this.setStickyCss();
this.isfixed=false;
//把改变定位的操作添加到节流函数与window.requestAnimationFrame方法中，确保一定事件内必须执行一次
this.onscrollCb=this.throttle(function(){
this.nextFrame(this.sticky.bind(this));
}.bind(this),50,100);
this.initCss=this.getInitCss();
this.fixedCss=this.getFixedCss();
this.addEvent();
}
};
/**
*获取原始css样式
*@return{string}定位的样式
*/
sPro.getInitCss=function(){
if(!!this.fixedNode){
return"position:"+this.fixedNode.style.position+";top:"+this.fixedNode.style.top+"px;z-index:"+this.fixedNode.style.zIndex+";";
}
return"";
};
/**
*生成fixed时的css样式
*@return{void}
*/
sPro.getFixedCss=function(){
return"position:fixed;top:"+this.top+"px;z-index:"+this.zIndex+";";
};
/**
*给fixedNode设置fixed定位样式
*@param{string}stylefixed定位的样式字符串
*/
sPro.setFixedCss=function(style){
if(!this.cssStickySupport){
if(!!this.fixedNode){
this.fixedNode.style.cssText=style;
}
}
};
/**
*检查浏览器是否支持positon:sticky定位
*@return{boolean}true支持false不支持
*/
sPro.checkStickySupport=function(){
vardiv=null;
if(g.CSS&&g.CSS.supports){
returng.CSS.supports("(position:sticky)or(position:-webkit-sticky)");
}
div=document.createElement("div");
div.style.position="sticky";
if("sticky"===div.style.position){
returntrue;
}
div.style.position="-webkit-sticky";
if("-webkit-sticky"===div.style.position){
returntrue;
}
div=null;
returnfalse;
};
/**
*给sticyNode设置position:sticky定位
*/
sPro.setStickyCss=function(){
if(this.cssStickySupport){
this.stickyNode.style.cssText="position:-webkit-sticky;position:sticky;top:"+this.top+"px;z-index:"+this.zIndex+";";
}
};
/**
*监听window的滚动事件
*/
sPro.addEvent=function(){
$(g).on('scroll',this.onscrollCb.bind(this));
};
/**
*让函数在规定时间内必须执行一次
*@param{Function}fn定时执行的函数
*@param{int}delay延迟多少毫秒执行
*@param{[type]}mustRunDelay多少毫秒内必须执行一次
*@return{[type]}[description]
*/
sPro.throttle=function(fn,delay,mustRunDelay){
vartimer=null;
varlastTime;
returnfunction(){
varnow=+newDate();
varargs=arguments;
g.clearTimeout(timer);
if(!lastTime){
lastTime=now;
}
if(now-lastTime>mustRunDelay){
fn.apply(this,args);
lastTime=now;
}else{
g.setTimeout(function(){
fn.apply(this,args);
}.bind(this),delay);
}
}.bind(this);
};
/**
*window.requestAnimationFrame的兼容性写法，保证在100/6ms执行一次
*@param{Function}fn100/16ms需要执行的函数
*@return{void}
*/
sPro.nextFrame=(function(fn){
varprefix=["ms","moz","webkit","o"];
varhandle={};
handle.requestAnimationFrame=window.requestAnimationFrame;
for(vari=0;ithis.top&&this.isfixed){
this.setFixedCss(this.initCss.replace(/position:[^;]*/,"position:static"));
g.setTimeout(function(){
this.setFixedCss(this.initCss)
}.bind(this),30);
this.fixedClazz&&$(this.fixedNode).removeClass(this.fixedClazz);
this.isfixed=false;
$(this).trigger('onsticky',true);
}
};
$.initSticky=function(options){
returnnewSticky(options);
};
})();
html结构：
了解儿童编程
参与公益直播课
上传编程作品
css结构：
.g-page-box.m-nav{
height:1.33333rem;
}
.g-page-box.m-nav.nav-fixed{
height:.86667rem;
padding:.22667rem.50667rem;
background-color:#1aadbb;
position:relative;
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
transition:height4s;
}
.fixed{
position:fixed;
top:0px;
z-index:100;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。