Html5之title吸頂功能

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

吸頂功能

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

基本原則

在H5中實現的基本原理就是判斷目前頁面滑動的距離scrollTop和標題距離頁面頂部距離offsetTop的關係，進而設定標題的position = fixed。這裡要明白scrollTop和offsetTop屬性的意思。

scrollTop

代表有捲軸時，滾動條向下捲動的距離也就是元素頂部被遮住部分的高度。在沒有滾動條時scrollTop==0恆成立。單位px，可讀可設定。

offsetTop

目前元素頂部距離最近父元素頂部的距離,和有沒有滾動條沒有關係。單位px，唯讀元素。

所以，當scrollTop>offsetTop時，title的position = fixed，top = 0,使其固定在螢幕上方；當scrollTop

 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

以上是Html5之title吸頂功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！