Html5之title吸顶作用

日期：2021-01-19 类型：科技新闻 

关键词：建站平台有哪些，如何建设网站，免费自助建站，如何建立一个网站，网站建站的

吸顶作用

吸顶是1种较为普遍的互动实际效果，当网页页面滑出显示屏界限，题目会全自动吸附在显示屏边沿，用于提醒客户。

基础基本原理

在H5中完成的基础基本原理便是分辨当今网页页面拖动的间距scrollTop和题目间距网页页面顶部间距offsetTop的关联，进而设定题目的position = fixed。这里必须搞清楚scrollTop和offsetTop特性的含意。

scrollTop

意味着在有翻转条时，翻转条向下翻转的间距也便是元素顶部被遮挡住一部分的高宽比。在沒有翻转条时scrollTop==0恒创立。企业px，可读可设定。

offsetTop

当今元素顶部间距近期父元素顶部的间距,和有木有翻转条沒有关联。企业px，写保护元素。

因此，当scrollTop>offsetTop时，title的position = fixed，top = 0,使之固定不动在显示屏上方；当scrollTop < offsetTop,撤销position = fixed，编码以下：

 if (fixedDom[0].offsetTop - elementScrollTop < 0){
            fixedDom.addClass("road-tab-fixed")
          }else {
            fixedDom.removeClass("road-tab-fixed")
          }

实际效果以下：

提升

有图看出基础作用完成的类似了，可是觉得哪里怪怪的。当网页页面向上滑时效性果還是较为当然的，可是当网页页面下滑时，仅有当网页页面彻底滑到顶部时，题目才会返回原位，致使过多不当然，因此针对titile的position的设置要分两种状况：上滑和下滑。

分辨左右拖动方位

分辨左右拖动点一下此处

当网页页面上滑时

当scrollTop>offsetTop时，title的position = fixed，top = 0,使之固定不动在显示屏上方；

当网页页面下滑时

当scrollTop<offsetTop时，撤销掉fixed特性，这样就会使题目追随网页页面拖动下来，互动更为当然了，

编码以下：

if(beforeElementScrollTop - elementScrollTop <=0){//up
            console.log('up');
            if (beforeOffsetTop - elementScrollTop < 0){
              fixedDom.addClass("road-tab-fixed")
            }
          }else{
            console.log('down');
            // console.log('beforeOffsetTop-----------',beforeOffsetTop);
            // console.log('elementScrollTop--------------',elementScrollTop);
            if (beforeOffsetTop - elementScrollTop >= 0){
              fixedDom.removeClass("road-tab-fixed")
            }
          }

实际效果以下：

提升之scroll节流阀

当对网页页面监视了scroll恶性事件后，拖动时scroll的回调函数会1直在实行，危害到网页页面特性，而节流阀只容许1个涵数在 X 毫秒内实行1次，仅有当上1次涵数实行后过了你要求的時间间距，才可以开展下1次该涵数的启用。编码以下

const fixedDom = $("#road-tab"),
          isIos = utils.getMobileType(),
          tabclass = "road-tab-fixed";
        let beforeElementScrollTop = 0;
        let beforeOffsetTop = fixedDom[0].offsetTop;
        //scroll节流阀
        const throttle = (func,wait,mustRun) => {
          var timeout,
            startTime = new Date();

          return function() {
            var context = this,
              args = arguments,
              curTime = new Date()
            clearTimeout(timeout)
            // 假如做到了要求的开启時间间距，开启 handler
            if(curTime - startTime >= mustRun){
              beforeElementScrollTop = document.body.scrollTop;
              console.log("beforelementScrollTop----------",document.body.scrollTop);
              func.apply(context,args);
              startTime = curTime
              // 没做到开启间距，再次设置定时执行器
            }else{
              timeout = setTimeout(func, wait)
            }
          }
        }
        const winScroll = (e) => {
          const elementScrollTop=document.body.scrollTop;
          console.log('elementScrollTop--------------',elementScrollTop);
          if(beforeElementScrollTop - elementScrollTop <=0){//up
            console.log('up');
            if (beforeOffsetTop - elementScrollTop < 0){
              fixedDom.addClass("road-tab-fixed")
            }
          }else{
            if (beforeOffsetTop - elementScrollTop >= 0){console.log("UUUUUU");
              fixedDom.removeClass("road-tab-fixed")
            }
          }
        };
        $(window).off("scroll").on("scroll", throttle(winScroll,10,100));

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：益智类手机微信手机游戏挑戰你的强劲脑 返回下一篇：没有了