這篇“Html5中title吸頂功能的示例分析”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“Html5中title吸頂功能的示例分析”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作與策劃設(shè)計(jì),湖南網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:湖南等地區(qū)。湖南做網(wǎng)站價(jià)格咨詢:18980820575html是什么

html的全稱為超文本標(biāo)記語言，它是一種標(biāo)記語言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。

吸頂是一種比較常見的交互效果，當(dāng)頁面滑出屏幕邊界，標(biāo)題會(huì)自動(dòng)吸附在屏幕邊緣，用于提示用戶。

吸頂功能

吸頂是一種比較常見的交互效果，當(dāng)頁面滑出屏幕邊界，標(biāo)題會(huì)自動(dòng)吸附在屏幕邊緣，用于提示用戶。

基本原理

在H5中實(shí)現(xiàn)的基本原理就是判斷當(dāng)前頁面滑動(dòng)的距離scrollTop和標(biāo)題距離頁面頂部距離offsetTop的關(guān)系，進(jìn)而設(shè)置標(biāo)題的position = fixed。這里需要明白scrollTop和offsetTop屬性的含義。

scrollTop

代表在有滾動(dòng)條時(shí)，滾動(dòng)條向下滾動(dòng)的距離也就是元素頂部被遮住部分的高度。在沒有滾動(dòng)條時(shí)scrollTop==0恒成立。單位px，可讀可設(shè)置。

offsetTop

當(dāng)前元素頂部距離最近父元素頂部的距離,和有沒有滾動(dòng)條沒有關(guān)系。單位px，只讀元素。

所以，當(dāng)scrollTop>offsetTop時(shí)，title的position = fixed，top = 0,使之固定在屏幕上方；當(dāng)scrollTop < offsetTop,取消position = fixed，代碼如下：

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

效果如下：

優(yōu)化

有圖看出基本功能實(shí)現(xiàn)的差不多了，但是感覺哪里怪怪的。當(dāng)頁面向上滑時(shí)效果還是比較自然的，但是當(dāng)頁面下滑時(shí)，只有當(dāng)頁面完全滑到頂部時(shí)，標(biāo)題才會(huì)回到原位，導(dǎo)致過度不自然，所以對于titile的position的設(shè)定要分兩種情況：上滑和下滑。

判斷上下滑動(dòng)方向

判斷上下滑動(dòng)點(diǎn)擊此處

當(dāng)頁面上滑時(shí)

當(dāng)scrollTop>offsetTop時(shí)，title的position = fixed，top = 0,使之固定在屏幕上方；

當(dāng)頁面下滑時(shí)

當(dāng)scrollTop<offsetTop時(shí)，取消掉fixed屬性，這樣就會(huì)使標(biāo)題跟隨頁面滑動(dòng)下來，交互更加自然了，

代碼如下：

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")
            }
          }

效果如下：

優(yōu)化之scroll節(jié)流

當(dāng)對頁面監(jiān)聽了scroll事件后，滑動(dòng)時(shí)scroll的回調(diào)會(huì)一直在執(zhí)行，影響到頁面性能，而節(jié)流只允許一個(gè)函數(shù)在 X 毫秒內(nèi)執(zhí)行一次，只有當(dāng)上一次函數(shù)執(zhí)行后過了你規(guī)定的時(shí)間間隔，才能進(jìn)行下一次該函數(shù)的調(diào)用。代碼如下

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

          return function() {
            var context = this,
              args = arguments,
              curTime = new Date()
            clearTimeout(timeout)
            // 如果達(dá)到了規(guī)定的觸發(fā)時(shí)間間隔，觸發(fā) handler
            if(curTime - startTime >= mustRun){
              beforeElementScrollTop = document.body.scrollTop;
              console.log("beforelementScrollTop----------",document.body.scrollTop);
              func.apply(context,args);
              startTime = curTime
              // 沒達(dá)到觸發(fā)間隔，重新設(shè)定定時(shí)器
            }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));

感謝你的閱讀，希望你對“Html5中title吸頂功能的示例分析”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過才能領(lǐng)會(huì)，快去試試吧，如果想閱讀更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

當(dāng)前文章：Html5中title吸頂功能的示例分析-創(chuàng)新互聯(lián)
文章位置：http://www.rwnh.cn/article36/dhhdsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、虛擬主機(jī)、網(wǎng)站建設(shè)、用戶體驗(yàn)、微信小程序、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)