原生js實(shí)現(xiàn)吸頂效果
更新時(shí)間：2017年03月13日 11:02:05 作者：wmaqingbo
本文主要介紹了原生js實(shí)現(xiàn)吸頂效果的示例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
實(shí)現(xiàn)思路如下：
1. div初始居普通文檔流中
2. 給window添加scroll事件（可事件節(jié)流），獲取div的offset的top值，滾動(dòng)時(shí)scrollTop值和top比較，當(dāng)?shù)竭_(dá)top時(shí)給div添加一個(gè)fixed的class使其固定
3. 向上滾動(dòng)時(shí)當(dāng)?shù)竭_(dá)div初始top時(shí)則刪除fixed的class，此時(shí)div又回到普通文檔流中
4. fixed樣式非IE6瀏覽器使用position:fixed，IE6使用position:absolute和IE expression
效果圖：
代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 100%;
height: 50px;
background: skyblue;
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
var divT = oDiv.offsetTop;
//console.log(divT);
window.onscroll = function() {
// 獲取當(dāng)前頁(yè)面的滾動(dòng)條縱坐標(biāo)位置 （依次為火狐谷歌、safari、IE678）
var scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
if (scrollT >= divT) {
if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {
// 兼容IE6代碼
oDiv.style.position = 'absolute';
oDiv.style.top = scrollT + 'px';
oDiv.style.left = 0 + 'px';
} else {
// 正常瀏覽器代碼
oDiv.style.position = 'fixed';
oDiv.style.top = 0;
oDiv.style.left = 0;
}
} else
oDiv.style.position = '';
}
}
</script>
</head>
<body>
<div class="all">
以上<br>
以上<br>
以上<br>
以上<br>
以上<br>
以上<br>
以上<br>
<div id="div1"></div>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
啦啦啦啦啦<br>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序畫布圓形進(jìn)度條顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
JavaScript中apply與call的用法意義及區(qū)別說(shuō)明
JavaScript中有一個(gè)call和apply方法，其作用基本相同，但也有略微的區(qū)別。2010-04-04
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)多功能計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
JavaScript運(yùn)動(dòng)框架 解決速度正負(fù)取整問(wèn)題(一)
這篇文章主要為大家詳細(xì)介紹了JavaScript運(yùn)動(dòng)框架的第一部分，解決速度正負(fù)取整問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05 
這篇文章主要介紹了微信小程序修改checkbox的樣式代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-01-01 
javascript實(shí)現(xiàn)3D切換焦點(diǎn)圖
一款用JavaScript模仿3D立體切換效果的js焦點(diǎn)幻燈片特效，使用方法很簡(jiǎn)單：用鼠標(biāo)拖拽圖片向左右方向就好～
2015-10-10 
Javascript-Mozilla和IE中的一個(gè)函數(shù)直接量的問(wèn)題
Javascript-Mozilla和IE中的一個(gè)函數(shù)直接量的問(wèn)題...
2007-01-01 
js中如何將多層嵌套的數(shù)組轉(zhuǎn)換為一層數(shù)組
這篇文章主要介紹了js中如何將多層嵌套的數(shù)組轉(zhuǎn)換為一層數(shù)組問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06 
js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁(yè)面效果(類似360默認(rèn)頁(yè)面滾動(dòng)切換效果)
這篇文章主要介紹了js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁(yè)面效果,類似360默認(rèn)頁(yè)面滾動(dòng)切換效果.涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下
2016-01-01