经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS3 » 查看文章
移动端吸顶fixbar的解决方案详解
来源：jb51　　时间：2019/7/17 11:02:02　　对本文有异议

需求背景

经常会有这样的需求，当页面滚动到某一个位置时，需要某个页面元素固定在屏幕顶部，并且有时需要连续滚动吸顶。在PC端主要的实现是通过 CSS 的 position: fixed 属性，但是在移动端，尤其是在安卓端，存在诸多的兼容性问题。

问题

position：fixed给移动端带来的问题：

  • IOS8在页面滚动时，吸顶不连续；页面滑动时，不见吸顶，页面滚动停止后，吸顶缓慢出现
  • 滚动到顶部之后，会出现两个一样的吸顶, 过一会才恢复正常。
  • footer底部输入框 focus 状态，footer 底部输入框被居中，而不是吸附在软键盘上部。
  • iPhone 4s&5 / iOS 6&7 / Safari 下，页面底部footer输入框失去焦点时，header定位出错。当页面有滚动动作时，header定位恢复正常。
  • iPhone 4 / iOS 5 / Safari下，当页面发生跳转，再退回时，fixed区域消失，当内容获得焦点时，fixed区域才显示。
  • 安卓低版本／自带浏览器，不支持fixed属性，iOS4 也是不支持 fixed 的。
  • 三星i9100(S2) / 自带浏览器，在滚屏过程中，fixed定位异常，touchend之后恢复正常。
  • 部分低版本Android对支持不好，video poster属性设置的封面图会遮挡fixed元素。
  • QQ、UC浏览器滚动页面时footer定位错误，会往上偏移，是由于地址栏收起的缘故。
  • *remind：不要在 fixed 元素中使用 input / textarea 元素。

解决方案

分别处理各个问题：

IOS

在IOS端，使用 position： sticky 这个属性，使用类似于 position: relative 和 position: absolute 的结合体。在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

使用时，需要加上私有前缀

  1. position: -webkit-sticky;
  2. position: -moz-sticky;
  3. position: -ms-sticky;
  4. 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 事件都进行监听。

  1. // 注意处理遮罩层的位置
  2.   var scrollHandler = function () {
  3.     if (topLength < me.getScrollTop()) {
  4.       target.css('position', 'fixed');
  5.       me.replaceEle.show();
  6.     }
  7.     else {
  8.       target.css('position', 'relative');
  9.       me.replaceEle.hide();
  10.     }
  11.   };
  12.   // 安卓情况下，防止惯性滚动引起的fix不及时的情况
  13.   if (/(Android)/i.test(navigator.userAgent)) {
  14.  
  15.     $(window).on('scroll', scrollHandler);
  16.  
  17.     $(document.body).on('touchstart', scrollHandler);
  18.     $(document.body).on('touchmove', scrollHandler);
  19.     $(document.body).on('touchend', function () {
  20.       scrollHandler();
  21.       setTimeout(scrollHandler, 1000);
  22.     });
  23.   }

不支持sticky

如果浏览器不支持position:sticky，那么就使用js动态的在节点在fixed定位于static定位中切换，但是需要对切换过程做一些优化。

1、使用函数节流防抖减少dom操作频繁粗发，但是保证在规定时间内必须执行一次。

2、使用window.requestAnimationFrame 方法在下一帧前触发浏览器的强制同步布局，是对dom的操作能及时渲染到页面上。

3、减少对dom的读写操作，或者把dom操作把读、写操作分开，可以减少渲染次数。

原文代码

  1. 	(function() {
  2. 	  function Sticky(){
  3. 	    this.init.apply(this, arguments);
  4. 	  }
  5. 	
  6. 	  /**
  7. 	   * 滚动fixed组件初始化
  8. 	   * @param {object}     setting        allocate传进来的参数
  9. 	   * @param {object}     setting.stickyNode   需要设置position:sticky的节点，通常是最外层
  10. 	   * @param {object}     setting.fixedNode   当滚动一定距离时需要fixed在顶部的节点
  11. 	   * @param {int}      setting.top      fixed之后距离顶部的top值
  12. 	   * @param {int}      setting.zIndex     fixed之后的z-index值
  13. 	   * @param {string}     setting.fixedClazz   fixed时给fixedNode添加的类
  14. 	   * @param {function}   setting.runInScrollFn 滚动期间额外执行的函数
  15. 	   * @return {void} 
  16. 	   */
  17. 	  Sticky.setting = {
  18. 	    stickyNode: null,
  19. 	    fixedNode: null,
  20. 	    top: 0,
  21. 	    zIndex: 100,
  22. 	    fixedClazz: '',
  23. 	    runInScrollFn: null
  24. 	  };
  25. 	  var sPro = Sticky.prototype;
  26. 	  var g = window;
  27. 	
  28. 	  /**
  29. 	   * 初始化
  30. 	   * @param {object} options 设置
  31. 	   * @return {void}     
  32. 	   */
  33. 	  sPro.init = function(options){
  34. 	    this.setting = $.extend({}, Sticky.setting, options, true);
  35. 	    if (options.fixedNode) {
  36. 	      this.fixedNode = options.fixedNode[0] || options.fixedNode;
  37. 	      this.stickyNode = options.stickyNode[0] || options.stickyNode;
  38. 	      this.cssStickySupport = this.checkStickySupport();
  39. 	      this.stickyNodeHeight = this.stickyNode.clientHeight;
  40. 	      this.fixedClazz = options.fixedClazz;
  41. 	      this.top = parseInt(options.top, 10) || 0;
  42. 	      this.zIndex = parseInt(options.zIndex) || 1;
  43. 	      this.setStickyCss();
  44. 	      this.isfixed = false;
  45. 	      // 把改变定位的操作添加到节流函数与window.requestAnimationFrame方法中，确保一定事件内必须执行一次
  46. 	      this.onscrollCb = this.throttle(function() {
  47. 	        this.nextFrame(this.sticky.bind(this));
  48. 	      }.bind(this), 50, 100);
  49. 	      this.initCss = this.getInitCss();
  50. 	      this.fixedCss = this.getFixedCss();
  51. 	      this.addEvent();
  52. 	    }
  53. 	  };
  54. 	
  55. 	  /**
  56. 	   * 获取原始css样式
  57. 	   * @return {string} 定位的样式
  58. 	   */
  59. 	  sPro.getInitCss = function() {
  60. 	    if (!!this.fixedNode) {
  61. 	      return "position:" + this.fixedNode.style.position + ";top:" + this.fixedNode.style.top + "px;z-index:" + this.fixedNode.style.zIndex + ";";
  62. 	    }
  63. 	    return "";
  64. 	  };
  65. 	
  66. 	  /**
  67. 	   * 生成fixed时的css样式
  68. 	   * @return {void}
  69. 	   */
  70. 	  sPro.getFixedCss = function() {
  71. 	    return "position:fixed;top:" + this.top + "px;z-index:" + this.zIndex + ";";
  72. 	  };
  73. 	
  74. 	  /**
  75. 	   * 给fixedNode设置fixed定位样式
  76. 	   * @param {string} style fixed定位的样式字符串
  77. 	   */
  78. 	  sPro.setFixedCss = function(style) {
  79. 	    if(!this.cssStickySupport){
  80. 	      if (!!this.fixedNode){
  81. 	        this.fixedNode.style.cssText = style;
  82. 	      }
  83. 	    }
  84. 	  };
  85. 	
  86. 	  /**
  87. 	   * 检查浏览器是否支持positon: sticky定位
  88. 	   * @return {boolean} true 支持 false 不支持
  89. 	   */
  90. 	  sPro.checkStickySupport = function() {
  91. 	    var div= null;
  92. 	    if(g.CSS && g.CSS.supports){
  93. 	      return g.CSS.supports("(position: sticky) or (position: -webkit-sticky)");
  94. 	    }
  95. 	    div = document.createElement("div");
  96. 	    div.style.position = "sticky";
  97. 	    if("sticky" === div.style.position){
  98. 	      return true;
  99. 	    }
  100. 	    div.style.position = "-webkit-sticky";
  101. 	    if("-webkit-sticky" === div.style.position){
  102. 	      return true;
  103. 	    }
  104. 	    div = null;
  105. 	    return false;
  106. 	  };
  107. 	
  108. 	  /**
  109. 	   * 给sticyNode设置position: sticky定位
  110. 	   */
  111. 	  sPro.setStickyCss = function() {
  112. 	    if(this.cssStickySupport){
  113. 	      this.stickyNode.style.cssText = "position:-webkit-sticky;position:sticky;top:" + this.top + "px;z-index:" + this.zIndex + ";";
  114. 	    }
  115. 	  };
  116. 	
  117. 	  /**
  118. 	   * 监听window的滚动事件
  119. 	   */
  120. 	  sPro.addEvent = function() {
  121. 	    $(g).on('scroll', this.onscrollCb.bind(this));
  122. 	  };
  123. 	
  124. 	  /**
  125. 	   * 让函数在规定时间内必须执行一次
  126. 	   * @param {Function} fn   定时执行的函数
  127. 	   * @param {int}   delay 延迟多少毫秒执行
  128. 	   * @param {[type]}  mustRunDelay 多少毫秒内必须执行一次
  129. 	   * @return {[type]}   [description]
  130. 	   */
  131. 	  sPro.throttle = function(fn, delay, mustRunDelay){
  132. 	    var timer = null;
  133. 	    var lastTime;
  134. 	    return function(){
  135. 	      var now = +new Date();
  136. 	      var args = arguments;
  137. 	      g.clearTimeout(timer);
  138. 	      if(!lastTime){
  139. 	        lastTime = now;
  140. 	      }
  141. 	      if(now - lastTime > mustRunDelay){
  142. 	        fn.apply(this, args);
  143. 	        lastTime = now;
  144. 	      }else{
  145. 	        g.setTimeout(function(){
  146. 	          fn.apply(this, args);
  147. 	        }.bind(this), delay);
  148. 	      }
  149. 	    }.bind(this);
  150. 	  };
  151. 	
  152. 	  /**
  153. 	   * window.requestAnimationFrame的兼容性写法，保证在100/6ms执行一次
  154. 	   * @param {Function} fn 100/16ms需要执行的函数
  155. 	   * @return {void}   
  156. 	   */
  157. 	  sPro.nextFrame = (function(fn){
  158. 	    var prefix = ["ms", "moz", "webkit", "o"];
  159. 	    var handle = {};
  160. 	    handle.requestAnimationFrame = window.requestAnimationFrame;
  161. 	    for(var i = 0; i < prefix.length && !handle.requestAnimationFrame; ++i){
  162. 	      handle.requestAnimationFrame = window[prefix[i] + "RequestAnimationFrame"];
  163. 	    }
  164. 	    if(!handle.requestAnimationFrame){
  165. 	      handle.requestAnimationFrame = function(fn) {
  166. 	        var raf = window.setTimeout(function() {
  167. 	          fn();
  168. 	        }, 16);
  169. 	        return raf;
  170. 	      };
  171. 	    }
  172. 	    return function(fn) {
  173. 	      handle.requestAnimationFrame.apply(g, arguments);
  174. 	    }
  175. 	  })();
  176. 	
  177. 	  /**
  178. 	   * 判断stickyNode的当前位置设置fixed|static|sticky定位
  179. 	   * @return {void}
  180. 	   */
  181. 	  sPro.sticky = function() {
  182. 	    this.setting.runInScrollFn && this.setting.runInScrollFn();
  183. 	    var stickyNodeBox = this.stickyNode.getBoundingClientRect();
  184. 	    if(stickyNodeBox.top <= this.top && !this.isfixed){
  185. 	      this.setFixedCss(this.fixedCss);
  186. 	      this.fixedClazz && $(this.fixedNode).addClass(this.fixedClazz);
  187. 	      this.isfixed = true;
  188. 	      $(this).trigger('onsticky', true);
  189. 	    } else if(stickyNodeBox.top > this.top && this.isfixed) {
  190. 	      this.setFixedCss(this.initCss.replace(/position:[^;]*/, "position:static"));
  191. 	      g.setTimeout(function() {
  192. 	        this.setFixedCss(this.initCss)
  193. 	      }.bind(this), 30);
  194. 	      this.fixedClazz && $(this.fixedNode).removeClass(this.fixedClazz);
  195. 	      this.isfixed = false;
  196. 	      $(this).trigger('onsticky', true);
  197. 	    }
  198. 	  };
  199. 	
  200. 	  $.initSticky = function(options){
  201. 	    return new Sticky(options);
  202.   	};
  203. })();

html 结构：

  1. <div class="m-nav">
  2.  		<div class="nav-fixed fixed" id="j-nav" style="position: fixed; top: 0px; z-index: 100;">
  3.    	<ul class="f-cb">
  4.      	<li class="active" anchor-id="j-understand">了解儿童编程</li>
  5.       		<li anchor-id="j-join">参与公益直播课</li>
  6.          <li anchor-id="j-upload">上传编程作品</li>
  7.      </ul>
  8.    </div>
  9. </div>

css 结构：

  1. .g-page-box .m-nav {
  2.  	height: 1.33333rem;
  3. }
  4.  
  5. .g-page-box .m-nav .nav-fixed {
  6. 	 height: .86667rem;
  7. 	 padding: .22667rem .50667rem;
  8. 	 background-color: #1aadbb;
  9. 	 position: relative;
  10. 	 transform: translate3d(0, 0, 0);
  11. 	 -webkit-transform: translate3d(0, 0, 0);
  12. 	 transition: height 4s;
  13. }
  14.  
  15. .fixed {
  16. 	position: fixed;
  17. 	top: 0px;
  18. 	z-index: 100;
  19. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS3热门文章

  • CSS3选择器新增问题的实现_css3_CSS
  • CSS3实现列表无限滚动/轮播效果_css3_CSS
  • CSS3 Tab动画实例之背景切换动态效果_css3_CSS
  • Github上流行的CSS3动画效果库 animate.css
  • CSS3通过var()和calc()函数实现动画特效_css3_CSS
  • CSS3动画之DIY Loading动画
  • CSS中这个函数你会用吗？垂直居中都可以设置
  • 巧用 CSS3的webkit-box-reflect 倒影实现各类动效_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3过渡旋转透视2d3d动画等效果的实例代码_css3_CSS

    • CSS3推荐文章

  • 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
  • 可视化学习：如何生成简单动画让图形动起来
  • 【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
  • 【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原
  • 【动画进阶】神奇的 3D 磨砂玻璃透视效果
  • 快速构建页面结构的 3D Visualization
  • 详解CSS3.0(Cascading Style Sheet) 层叠级联样式表_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3实现的侧滑菜单_css3_CSS
  • CSS3常见动画的实现方式_css3_CSS

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号