移动端吸顶fixbar解决方案.docx

移动端吸顶fixbar解决方案
 
   
 
 
 
 
 
 
 
     
 
 
 
 
 
需求背景
经常会有这样的需求，当页面滚动到某一个位置时，需要某个页面元素固定在屏幕顶部，并且有 scrollHandler();
setTimeout(scrollHandler, 1000);
});
}
不支持sticky
如果浏览器不支持position:sticky，那么就使用js动态的在节点在fixed定位于static定位中切换，但是需要对切换过程做一些优化。
1、使用函数节流防抖减少dom操作频繁粗发，但是保证在规定时间内必须执行一次。
2、 方法在下一帧前触发浏览器的强制同步布局，是对dom的操作能及时渲染到页面上。
3、减少对dom的读写操作，或者把dom操作把读、写操作分开，可以减少渲染次数。
参照 原文代码
(function() {
function Sticky(){
(this, arguments);
}

/**
* 滚动fixed组件初始化
* ***@param {object} setting allocate传进来的参数
* ***@param {object} 需要设置position:sticky的节点，通常是最外层
* ***@param {object} 当滚动一定距离时需要fixed在顶部的节点
* ***@param {int} fixed之后距离顶部的top值
* ***@param {int} fixed之后的z-index值
* ***@param {string} fixed时给fixedNode添加的类
* ***@param {function} 滚动期间额外执行的函数
* ***@return {void}
*/
= {
stickyNode: null,
fixedNode: null,
top: 0,
zIndex: 100,
fixedClazz: '',
runInScrollFn: null
};
var sPro = ;
var g = window;

/**
* 初始化
* ***@param {object} options 设置
* ***@return {void}
*/
= function(options){
= $.extend({}, , options, true);
if () {
= [0] || ;
= [0] || ;
= ();
= ;
= ;