側(cè)欄跟隨滾動(dòng)的簡單實(shí)現(xiàn)代碼
更新時(shí)間：2013年03月18日 14:28:32 作者：
側(cè)欄里的有些內(nèi)容滾動(dòng)到頁面頂端以后就固定在那個(gè)位置，不再跟隨滾動(dòng)條而滾動(dòng)，想必很多站長朋友都想實(shí)現(xiàn)這個(gè)效果吧，接下來為大家詳細(xì)介紹下，感興趣的你可不要錯(cuò)過了哈
瀏覽網(wǎng)站時(shí)經(jīng)常看到有的網(wǎng)站上，側(cè)欄里的有些內(nèi)容滾動(dòng)到頁面頂端以后就固定在那個(gè)位置，不再跟隨滾動(dòng)條而滾動(dòng)。這種效果叫做“側(cè)欄跟隨滾動(dòng)”。它對于那些不希望被滾動(dòng)到頁面之外的內(nèi)容是非常有用的。
側(cè)欄跟隨滾動(dòng)的實(shí)現(xiàn)方法有很多種，比較常見的有兩種，這兩種方法在NEOEASE寫的一篇文章中介紹的很清楚，一種是借助jQuery來實(shí)現(xiàn)，這種方法對于那些平時(shí)不需要加載jQuery庫的網(wǎng)站來說，顯然是一種負(fù)擔(dān)（jQuery現(xiàn)在是越做越大了……）。另外一種方法是通過原生javascript編寫的效果，這種方法相比上一種，要輕盈得多。但是，我還是不夠滿足，原生的javascript寫的文件也有4K多，對于我這種至簡至上的人來說，還是太繁雜了。那么有沒有更簡單的實(shí)現(xiàn)辦法呢？
答案當(dāng)然是肯定的。下面具體介紹。
先說html文件（當(dāng)然也可是動(dòng)態(tài)文件，里面總歸有html代碼的）
<div id="box">
<div id="float" class="div1">
在這里加入需要跟隨滾動(dòng)的內(nèi)容
</div>
</div>
然后是CSS代碼
#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:250;}
最后是JS代碼（可以放在需要滾動(dòng)的頁面中，也可以放在單獨(dú)的JS文件中再調(diào)用）
(function(){
var oDiv=document.getElementById("float");
var H=0,iE6;
var Y=oDiv;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
iE6=window.ActiveXObject&&!window.XMLHttpRequest;
if(!iE6){
window.onscroll=function()
{
var s=document.body.scrollTop||document.documentElement.scrollTop;
if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}
else{oDiv.className="div1";}
};
}
})();
OK，大功告成，夠簡單吧。
最后給個(gè) 示例。
側(cè)欄跟隨滾動(dòng)的實(shí)現(xiàn)方法有很多種，比較常見的有兩種，這兩種方法在NEOEASE寫的一篇文章中介紹的很清楚，一種是借助jQuery來實(shí)現(xiàn)，這種方法對于那些平時(shí)不需要加載jQuery庫的網(wǎng)站來說，顯然是一種負(fù)擔(dān)（jQuery現(xiàn)在是越做越大了……）。另外一種方法是通過原生javascript編寫的效果，這種方法相比上一種，要輕盈得多。但是，我還是不夠滿足，原生的javascript寫的文件也有4K多，對于我這種至簡至上的人來說，還是太繁雜了。那么有沒有更簡單的實(shí)現(xiàn)辦法呢？
答案當(dāng)然是肯定的。下面具體介紹。
先說html文件（當(dāng)然也可是動(dòng)態(tài)文件，里面總歸有html代碼的）
復(fù)制代碼 代碼如下:
<div id="box">
<div id="float" class="div1">
在這里加入需要跟隨滾動(dòng)的內(nèi)容
</div>
</div>
然后是CSS代碼
復(fù)制代碼 代碼如下:
#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:250;}
最后是JS代碼（可以放在需要滾動(dòng)的頁面中，也可以放在單獨(dú)的JS文件中再調(diào)用）
復(fù)制代碼 代碼如下:
(function(){
var oDiv=document.getElementById("float");
var H=0,iE6;
var Y=oDiv;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
iE6=window.ActiveXObject&&!window.XMLHttpRequest;
if(!iE6){
window.onscroll=function()
{
var s=document.body.scrollTop||document.documentElement.scrollTop;
if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}
else{oDiv.className="div1";}
};
}
})();
OK，大功告成，夠簡單吧。
最后給個(gè) 示例。
相關(guān)文章
分包指的是把一個(gè)完整的小程序項(xiàng)目,按照需求劃分為不同的子包,在構(gòu)建時(shí)打包成不同的分包,用戶在使用時(shí)按需進(jìn)行加載,下面這篇文章主要給大家介紹了關(guān)于微信小程序分包的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序wxs實(shí)現(xiàn)吸頂效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
JavaScript 中實(shí)現(xiàn) use strict的方法及優(yōu)勢
本教程將討論JavaScript中的use strict特性,在這里,我們將通過不同的示例了解如何在JavaScript代碼語句中創(chuàng)建和執(zhí)行use strict關(guān)鍵字,需要的朋友可以參考下2023-09-09
淺析Javascript中雙等號(==)隱性轉(zhuǎn)換機(jī)制
這篇文章給大家詳細(xì)介紹了javascript中雙等號(==)隱性轉(zhuǎn)換機(jī)制，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-10-10
這篇文章主要介紹了微信瀏覽器下拉黑邊解決方案 wScroollFix,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
之前竟然聽到有人跟我說微信小程序沒有組件插槽功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序中slot插槽基本使用方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
uniapp中使用計(jì)時(shí)器setInterval的場景與方法
計(jì)時(shí)器在日常開發(fā)中經(jīng)常會(huì)遇到,下面這篇文章主要給大家介紹了關(guān)于uniapp中使用計(jì)時(shí)器setInterval的場景與方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
uniapp開發(fā)小程序的開發(fā)規(guī)范總結(jié)
uni-app 是一個(gè)使用 vue.js 開發(fā)跨平臺(tái)應(yīng)用的前端框架,下面這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)小程序的開發(fā)規(guī)范,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
js添加table的行和列 具體實(shí)現(xiàn)方法
這篇文章介紹了js添加table的行和列 具體實(shí)現(xiàn)方法，有需要的朋友可以參考一下2013-07-07
使用script的src實(shí)現(xiàn)跨域和類似ajax效果
在解決js的跨域問題的時(shí)候， 有多種方式， 其中有一種是利用script標(biāo)簽的src屬性，因?yàn)檫@個(gè)屬性是不受域名限制的，我們可以直接讓src的這個(gè)鏈接指向跨域網(wǎng)站的一個(gè)接口， 這個(gè)接口返回的是js代碼或者json格式數(shù)據(jù)， 從而實(shí)現(xiàn)跨域獲取數(shù)據(jù)。2014-11-11