IT培訓(xùn)網(wǎng)
IT培訓(xùn)
Java培訓(xùn)
軟件測(cè)試培訓(xùn)
Web培訓(xùn)
Linux培訓(xùn)
Python培訓(xùn)
互聯(lián)網(wǎng)營(yíng)銷培訓(xùn)
UI培訓(xùn)
大數(shù)據(jù)培訓(xùn)關(guān)注我們
官方公眾號(hào) 回復(fù)"大禮包"享福利 
領(lǐng)學(xué)習(xí)資料 分享IT知識(shí) IT在線學(xué)習(xí)
熱門課程 更多 >
關(guān)注我們
掃碼領(lǐng)資料 零基礎(chǔ)學(xué)IT 微信掃碼關(guān)注 回復(fù)“大禮包”享福利 IT培訓(xùn)網(wǎng)
官方公眾號(hào) 回復(fù)"大禮包"享福利 領(lǐng)學(xué)習(xí)資料 分享IT知識(shí) IT在線學(xué)習(xí)
掃碼領(lǐng)資料 零基礎(chǔ)學(xué)IT 微信掃碼關(guān)注 回復(fù)“大禮包”享福利 
閱讀()
分享
手機(jī)端入口
當(dāng)內(nèi)容區(qū)域比較長(zhǎng)，需要滾動(dòng)頁(yè)面時(shí)，部分內(nèi)容需要在滾動(dòng)范圍內(nèi)的頂部始終展現(xiàn)，這種效果就稱之為固釘。那我們?cè)撊绾问褂胘s來(lái)實(shí)現(xiàn)這種結(jié)果呢。
在實(shí)現(xiàn)該效果之前，我們需要掌握body位置屬性中offset系列和scroll系列。
其關(guān)系如下圖所示：
offset系列中常用的屬性為：
1. 獲取元素的占位寬高
① 元素.offsetWidth：獲取元素的占位寬—width+padding+border
② 元素.offsetHeight：獲取元素的占位高—height+padding+border
2. 獲取元素在頁(yè)面中的位置
① 元素.offsetTop：當(dāng)前元素的頂部，到定位父元素的距離，沒(méi)有定位父元素，到 body 的距離;
② 元素.offsetLeft：當(dāng)前元素的左邊，到定位父元素的距離，沒(méi)有定位父元素，到 body 的距離;
scroll系列中常用的為：
1. 元素的滾動(dòng)(當(dāng)該元素內(nèi)部出現(xiàn)了滾動(dòng)條)
① 元素.scrollTop：元素被卷去的高;
② 元素.scrollLeft：元素被卷去的寬;
③ 元素.scrollWidth：獲取元素實(shí)際內(nèi)容寬;
④ 元素.scrollHeight：獲取元素實(shí)際內(nèi)容高;
2. 屏幕的滾動(dòng)距離：
document.documentElement.scrollTop：獲取頁(yè)面被卷去的高。
為了兼容ie一般為則需要用 document.body 代替 document.documentElement。
那之后我們來(lái)分析我們要實(shí)現(xiàn)的效果，例如在該圖示中黑色矩形代表窗口，紅色矩形代表整個(gè)html頁(yè)面，在我們滾動(dòng)頁(yè)面時(shí)當(dāng)黃色塊走到窗口頂部時(shí)讓其停留在窗口頂部。
接下來(lái)頁(yè)面滾動(dòng)時(shí)我們需要知道當(dāng)前頁(yè)面的滾動(dòng)距離即document.documentElement
.scrollTop，和黃色塊距離頁(yè)面頂部的距離即offsetTop，在滾動(dòng)的過(guò)程中比較這兩個(gè)值的大小，當(dāng)頁(yè)面被卷去的高度 >= 黃色塊距離頁(yè)面頂部的距離時(shí)，黃色塊應(yīng)該定在窗口頂端，這時(shí)應(yīng)該給黃色塊添加一個(gè)固定定位。當(dāng)條件不滿足時(shí)，再將其固定定位取消掉。
代碼為：
- <style>
- div{
- width: 100%;
- height: 150px;
- background: tomato;
- margin-bottom: 10px;
- }
- #con{
- background: yellow;
- }
- .active{
- position: fixed;
- top:0;
- left: 0;
- }
- </style>
- <body>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div id="con"></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </body>
- <script>
- var oCon = document.getElementById('con');
- // 需要先在外面存儲(chǔ)一下這個(gè)值，因?yàn)榧恿硕ㄎ恢髸?huì)變?yōu)楂@取到定位父元素的距離，為0
- var offsetT = oCon.offsetTop;
- // 當(dāng)頁(yè)面被卷去的高度 >= 紅盒子在頁(yè)面中的位置時(shí)，紅盒子就定在頂部
- // 添加滾動(dòng)事件
- window.onscroll = function(){
- var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
- if(scrollH >= offsetT){
- oCon.className = 'active';
- }else{
- oCon.className = '';
- }
- }
- </script>
需要注意的是：在頁(yè)面滾動(dòng)之前我們要先獲取黃色塊距離頁(yè)面頂部的距離，因?yàn)閛ffsetTop的值在元素沒(méi)有定位的情況下，獲取的才是其在頁(yè)面中的位置。當(dāng)加了固定定位之后該值會(huì)為0，之后條件判斷永遠(yuǎn)為真，則取消固定定位時(shí)無(wú)效。
>>本文地址：http://www.yceu.cn/zhuanye/2021/68022.html
聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有，未經(jīng)許可不得擅自轉(zhuǎn)載。
1 您的年齡
2 您的學(xué)歷
3 您更想做哪個(gè)方向的工作？
大前端
大數(shù)據(jù)
互聯(lián)網(wǎng)營(yíng)銷
Java
Linux
Python
嵌入式
全域電商運(yùn)營(yíng)
軟件測(cè)試
室內(nèi)設(shè)計(jì)
平面設(shè)計(jì)
電商設(shè)計(jì)
網(wǎng)頁(yè)設(shè)計(jì)
UI設(shè)計(jì)
VR/AR
網(wǎng)絡(luò)安全
新媒體
直播帶貨
智能機(jī)器人
中公教育IT培訓(xùn)品牌
400-650-7353
Copyright©1999-
北京中公教育科技有限公司 .All Rights Reserved
京ICP備10218183號(hào)-88
京ICP證161188號(hào)
京公網(wǎng)安備11010802020723號(hào)
投訴建議：400-650-7353
