吸顶功能吸顶是一种比较常见的交互效果。当页面滑出屏幕边界时，标题会自动附在屏幕边缘提醒用户。H5实现的基本原理是判断当前页面滑动距离的scrollTop和title到页面顶部的offsetTop距离的关系，然后设置title的位置=fixed。这里需要了解一下scrollTop和offsetTop属性的含义。scrollTop表示当有滚动条时，滚动条向下滚动的距离为元素顶部被覆盖部分的高度。scrollTop==0在没有滚动条的时候总是成立的。单位为px，可读可配置。offsetTop是当前元素的顶部到最近的父元素的顶部的距离，不管是否有滚动条。单位为px，只读元素。因此，当scrollTop>offsetTop时，标题的position=fixed,top=0，使其固定在屏幕顶部；whenscrollTopoffsetTop页面向上滑动时，title的position=fixed,top=0，使其固定在屏幕顶部；当页面向下时取消scrollTop=0){fixedDom.removeClass("road-tab-fixed")}}效果如下：优化滚动节流当页面监听到滚动事件时，会一直执行滚动回调滑动时，影响页面性能，节流只允许一个函数在X毫秒内执行一次，只有当从上一个函数执行后经过指定的时间间隔后才能进行下一次调用该函数。代码如下constfixedDom=$("#road-tab"),isIos=utils.getMobileType(),tabclass="road-tab-fixed";让beforeElementScrollTop=0;让beforeOffsetTop=fixedDom[0].offsetTop;//滚动节流constthrottle=(func,wait,mustRun)=>{vartimeout,startTime=newDate();returnfunction(){varcontext=this,args=arguments,curTime=newDate()clearTimeout(timeout)//如果达到指定的触发时间间隔，则触发处理程序if(curTime-startTime>=mustRun){beforeElementScrollTop=文档.body.scrollTop;console.log("beforeelementScrollTop----------",document.body.scrollTop);func.apply（上下文，参数）；startTime=curTime//如果没有达到触发间隔，则重置定时器}else{timeout=setTimeout(func,wait)}}}constwinScroll=(e)=>{constelementScrollTop=document.body.scrollTop;console.log('elementScrollTop------------',elementScrollTop);if(beforeElementScrollTop-elementScrollTop<=0){//upconsole.log('up');如果(beforeOffsetTop-elementScrollTop<0){fixedDom.addClass("road-tab-fixed")}}else{如果(beforeOffsetTop-elementScrollTop>=0){console.log("UUUUUU");fixedDom.removeClass("road-tab-fixed")}}};$(window).off("scroll").on("scroll",throttle(winScroll,10,100));
