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));

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