Html5之title吸頂功能
我要評論吸頂功能
吸頂是一種比較常見的交互效果，當(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));
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Html5導(dǎo)航欄吸頂方案原理與對比實(shí)現(xiàn)
這篇文章主要介紹了Html5導(dǎo)航欄吸頂方案原理與對比實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2020-06-10
css實(shí)現(xiàn)5種滾動(dòng)吸頂實(shí)現(xiàn)方式的比較(性能升級版)
這篇文章主要介紹了css實(shí)現(xiàn)5種滾動(dòng)吸頂實(shí)現(xiàn)方式的比較(性能升級版)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2019-07-31
純CSS解決H5布局中的吸頂吸底的實(shí)現(xiàn)步驟
這篇文章主要介紹了純CSS解決H5布局中的吸頂吸底的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來2021-01-11
