首頁 > web前端 > H5教程 > 主體

Html5之title吸頂功能

不言
發布: 2018-06-05 15:39:38
原創
2828 人瀏覽過

吸頂是一種比較常見的互動效果,當頁面滑出螢幕邊界,標題會自動吸附在螢幕邊緣,用於提示用戶,這篇文章主要介紹了Html5之title吸頂功能的相關資料,有興趣的朋友可以參考一下

吸頂功能

吸頂是比較常見的互動效果,當頁面滑出螢幕邊界,標題會自動吸附在螢幕邊緣,用於提示使用者。

基本原則

在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
if(beforeElementScrollTop - elementScrollTop <=0){//up
            console.log(&#39;up&#39;);
            if (beforeOffsetTop - elementScrollTop < 0){
              fixedDom.addClass("road-tab-fixed")
            }
          }else{
            console.log(&#39;down&#39;);
            // console.log(&#39;beforeOffsetTop-----------&#39;,beforeOffsetTop);
            // console.log(&#39;elementScrollTop--------------&#39;,elementScrollTop);
            if (beforeOffsetTop - elementScrollTop >= 0){
              fixedDom.removeClass("road-tab-fixed")
            }
          }
登入後複製
#########效果如下:######### #########優化之scroll節流#########當對頁面監聽了scroll事件後,滑動時scroll的回調會一直在執行,影響到頁面效能,而節流只允許一個函數在X 毫秒內執行一次,只有當上一次函數執行後過了你規定的時間間隔,才能進行下一次該函數的呼叫。程式碼如下#########
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(&#39;elementScrollTop--------------&#39;,elementScrollTop);
          if(beforeElementScrollTop - elementScrollTop <=0){//up
            console.log(&#39;up&#39;);
            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吸頂功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板