吸頂是一種比較常見的互動效果,當頁面滑出螢幕邊界,標題會自動吸附在螢幕邊緣,用於提示用戶,這篇文章主要介紹了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,使其固定在螢幕上方;當頁面下滑時
###當scrollTopif(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") } }
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));
以上是Html5之title吸頂功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!