吸頂是一種比較常見的互動效果，當頁面滑出螢幕邊界，標題會自動吸附在螢幕邊緣，用於提示用戶，這篇文章主要介紹了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")
}效果如下：
判斷上下滑動方向
##判斷上下滑動點擊此處
#當頁面上滑時
當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中文網其他相關文章！
