資訊專欄INFORMATION COLUMN
摘要：因?yàn)轫?xiàng)目需求，最近開始轉(zhuǎn)到微信公眾號開發(fā)，接觸到了框架，這個(gè)效果的實(shí)現(xiàn)雖說是基于框架下實(shí)現(xiàn)的，但是同樣也可以借鑒到其他地方，原理都是一樣的。上面我們得到了一個(gè)的屬性值，接下來我們只需要根據(jù)它的值來設(shè)置吸頂元素的屬性就可以了。
因?yàn)轫?xiàng)目需求，最近開始轉(zhuǎn)到微信公眾號開發(fā)，接觸到了Vue框架，這個(gè)效果的實(shí)現(xiàn)雖說是基于Vue框架下實(shí)現(xiàn)的，但是同樣也可以借鑒到其他地方，原理都是一樣的。
進(jìn)入正題，先看下效果圖：
其實(shí)js做這個(gè)效果還是挺簡單的，因?yàn)樵赾ss中我們可以設(shè)置一個(gè)元素的position: fixed;，這樣它就可以固定在那里，這樣不管頁面怎么滾動，它的位置都不受影響，所以我們的思路就是在合適的時(shí)機(jī)把要吸頂?shù)念^部元素的position屬性設(shè)置為fixed就可以了。但是這個(gè)合適的時(shí)機(jī)是什么時(shí)候呢，這就需要我們計(jì)算了，我們需要監(jiān)聽頁面的滾動狀態(tài)，當(dāng)頁面滾動到要吸頂元素所處的位置的時(shí)候就是我們設(shè)置它固定的時(shí)候，所以就需要我們：
在mounted回調(diào)中加入以下代碼：
mounted() {
// handleScroll為頁面滾動的監(jiān)聽回調(diào)
window.addEventListener("scroll", this.handleScroll);
},
同時(shí)在destroyed回調(diào)中移除監(jiān)聽：
destroyed(){
window.removeEventListener("scroll", this.handleScroll);
},
2.計(jì)算吸頂元素到頁面頂部的距離：
計(jì)算出來這個(gè)距離之后就可以確定固定吸頂元素的時(shí)機(jī)了，如果你的吸頂元素上面的元素的高度是固定的話，那就簡單了，直接在handleScroll方法中進(jìn)行判斷就可以了，可以直接跳到第三步了，如果是動態(tài)的，那就需要我們在接口請求完數(shù)據(jù)，dom元素渲染完之后進(jìn)行動態(tài)計(jì)算了，Vue中有一個(gè)很好用的方法，可以很方便的監(jiān)聽dom渲染完成：
// 監(jiān)聽dom渲染完成
this.$nextTick(function(){
// 這里fixedHeaderRoot是吸頂元素的ID
let header = document.getElementById("fixedHeaderRoot");
// 這里要得到top的距離和元素自身的高度
this.offsetTop = header.offsetTop;
this.offsetHeight = header.offsetHeight;
console.log("offsetTop:" + this.offsetTop + "," + this.offsetHeight);
});
3.判斷頁面滾動距離：
handleScroll(){
// 得到頁面滾動的距離
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
// 判斷頁面滾動的距離是否大于吸頂元素的位置
this.headerFixed = scrollTop > (this.offsetTop - this.offsetHeight * 2);
},
ps:這里理論上其實(shí)應(yīng)該是scrollTop > (this.offsetTop - this.offsetHeight)，但是不知道為啥我這里做出來后滾動到吸頂元素位置的時(shí)候scrollTop還是比this.offsetTop - this.offsetHeight的值小，所以這里*2，這樣得出來的值才剛剛好，如果有知道的朋友可以幫忙解惑一下。
上面我們得到了一個(gè)headerFixed的boolean屬性值，接下來我們只需要根據(jù)它的值來設(shè)置吸頂元素的position: fixed;屬性就可以了。
我們可以寫一個(gè)css樣式：
.isFixed{
position: fixed;
top: px2rem(110);
left: px2rem(20);
right: px2rem(20);
}
然后Vue可以在dom元素里這樣動態(tài)設(shè)置class，非常方便：
其實(shí)到這里這個(gè)效果已經(jīng)實(shí)現(xiàn)完成了，不過我在測試過程中發(fā)現(xiàn)，因?yàn)閕os手機(jī)頁面滾動到底部的時(shí)候，還可以上拉，有一個(gè)橡皮筋效果，這個(gè)效果會導(dǎo)致一個(gè)我們頁面的一個(gè)Bug，因?yàn)樗倪@種橡皮筋效果也會觸發(fā)頁面滾動的監(jiān)聽，當(dāng)數(shù)據(jù)很多的時(shí)候其實(shí)看不出來，只有當(dāng)數(shù)據(jù)剛好占滿屏幕的時(shí)候，這個(gè)時(shí)候你再繼續(xù)往上滑動屏幕，就會觸發(fā)頁面的滾動監(jiān)聽，這個(gè)時(shí)候handleScroll方法中計(jì)算出來的值scrollTop是大于吸頂元素top的距離，所以吸頂元素會被設(shè)置為固定屬性，大家知道一個(gè)元素一旦被設(shè)置為position: fixed;，那么它就會相對于瀏覽器窗口進(jìn)行定位，這樣我們下面的內(nèi)容就會往上頂，這樣的話scrollTop的值又小于了吸頂元素top的距離，這樣headerFixed屬性又為false，position: fixed;屬性又沒有了，這樣它就又相對與它原本的父元素進(jìn)行定位，這樣就成了一個(gè)循環(huán)，你會發(fā)現(xiàn)頁面會上下跳到，這樣是肯定不行的，所以我下面又針對這個(gè)問題進(jìn)行了一個(gè)優(yōu)化，當(dāng)然這個(gè)方案感覺不是特別完美，不過確實(shí)可以解決這個(gè)問題。 通過上面的分析我們可以得知造成這個(gè)問題的原因是因?yàn)槲覀儼言O(shè)置了元素的position: fixed;屬性，使得下面的內(nèi)容往上頂，所以要想解決這個(gè)問題，那我們就不固定這個(gè)元素，但是這樣的話就達(dá)不到吸頂?shù)男Ч耍晕覀冃枰偌右粋€(gè)和吸頂元素一模一樣的元素，它一直就是固定狀態(tài)：知識模塊知識點(diǎn)能力要求
這個(gè)元素默認(rèn)是隱藏的，只有當(dāng)頁面滾動的距離達(dá)到了它的位置的時(shí)候我們才讓它顯示，由于它是固定狀態(tài)，所以它的隱藏顯示并不會對頁面產(chǎn)生影響，這樣下面的內(nèi)容就不會往上頂了，就可以解決ios手機(jī)上拉頁面橡皮筋效果的Bug了，當(dāng)然這種方式有些取巧，但是暫時(shí)沒有更好的解決方案了，如果大家有更好的解決方案，歡迎在下面評論。最后給大家看一下我的頁面布局：知識模塊知識點(diǎn)能力要求
知識模塊知識點(diǎn)能力要求知識模塊知識點(diǎn)能力要求{{kpointItem.knowModule}}{{kpointItem.knowPoint}}{{kpointItem.abilityRequire}}
參考
喜歡的麻煩動動小手點(diǎn)個(gè)贊來支持我，有不對的地方歡迎大家指正，有什么問題也可以在下方留言，我看到后會第一時(shí)間回復(fù)！謝謝您來看這篇文章！文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106073.html
摘要：用于獲得當(dāng)前元素到定位父級頂部的距離偏移值。后來在項(xiàng)目中總會遇到滾動吸頂?shù)男Ч枰獙?shí)現(xiàn)，現(xiàn)在我將我知道的種滾動吸頂實(shí)現(xiàn)方式做詳細(xì)介紹。有兼容性問題，在微信瀏覽器某些版本中的值會為，于是乎也就有了第三種方案的兼容性寫法。修改版預(yù)覽 這篇文章是三天前寫就的，有大佬給我提了一些修改意見，我覺得這個(gè)意見確實(shí)中肯。所以就有了這個(gè)升級的修改版本。代碼同步更新到 GitHub 了。 修改內(nèi)容如下： 添加...
摘要：二按照官方的提示解決了意思就是切到分支，自己的分支解決沖突，提交。這是和二相反向的操作頁面標(biāo)題無效的解決辦法強(qiáng)類型轉(zhuǎn)換的坑條件用正則返回的布爾值結(jié)果返回了條件結(jié)果也返回了。 2018/3/2 1,vue的{{}}怎么失效了項(xiàng)目使用了twig模板渲染 語法{{}}沖突，使用v-text v-html渲染 可以寫表達(dá)式的寫法 字符+變量 2，函數(shù)防抖節(jié)流封裝實(shí)用的下拉加載更多代碼demo...
摘要：原文鏈接一般的吸頂，通常是給上一個(gè)定位便可實(shí)現(xiàn)，而類似于上圖這樣的粘黏吸頂，也是一個(gè)比較常見的需求粘黏吸頂大概的思路是這樣首先，給吸頂欄一個(gè)或者定位，通過去監(jiān)聽事件觸發(fā)一個(gè)判斷吸頂欄高度的函數(shù)，當(dāng)吸頂欄的高度距離可視區(qū)域頂部小于等于時(shí)，將其 原文鏈接: Fyerls Blog showImg(https://segmentfault.com/img/bVJMAs?w=360&h=240...
閱讀 1735·2021-11-22 12:09
閱讀 1463·2019-08-30 13:22
閱讀 2094·2019-08-29 17:00
閱讀 2645·2019-08-29 16:28
閱讀 2956·2019-08-26 13:51
閱讀 1184·2019-08-26 13:25
閱讀 3245·2019-08-26 12:14
閱讀 3015·2019-08-26 12:14
