摘要:吸頂功能吸頂是一種比較常見的交互效果,當頁面滑出屏幕邊界,標題會自動吸附在屏幕邊緣,用于提示用戶。代表在有滾動條時,滾動條向下滾動的距離也就是元素頂部被遮住部分的高度。在沒有滾動條時恒成立。單位,可讀可設置。
吸頂功能
吸頂是一種比較常見的交互效果,當頁面滑出屏幕邊界,標題會自動吸附在屏幕邊緣,用于提示用戶。
基本原理在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("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的回調會一直在執行,影響到頁面性能,而節流只允許一個函數在 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("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));
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/107901.html
摘要:在有滾動條時討論才有意義,在沒有滾動條時恒成立。單位,只讀元素代表在有滾動條時,滾動條向下滾動的距離也就是元素頂部被遮住部分的高度。當前元素頂部距離最近父元素頂部的距離和有沒有滾動條沒有關系。 通訊錄式的吸頂效果,當前bar固定在頂部 showImg(https://segmentfault.com/img/bVbnGoq?w=392&h=696); 方法一: js 監聽 onscro...
摘要:用于獲得當前元素到定位父級頂部的距離偏移值。后來在項目中總會遇到滾動吸頂的效果需要實現,現在我將我知道的種滾動吸頂實現方式做詳細介紹。有兼容性問題,在微信瀏覽器某些版本中的值會為,于是乎也就有了第三種方案的兼容性寫法。修改版預覽 這篇文章是三天前寫就的,有大佬給我提了一些修改意見,我覺得這個意見確實中肯。所以就有了這個升級的修改版本。代碼同步更新到 GitHub 了。 修改內容如下: 添加...
閱讀 826·2021-11-22 11:59
閱讀 3230·2021-11-17 09:33
閱讀 2308·2021-09-29 09:34
閱讀 1941·2021-09-22 15:25
閱讀 1955·2019-08-30 15:55
閱讀 1321·2019-08-30 15:55
閱讀 530·2019-08-30 15:53
閱讀 3346·2019-08-29 13:55