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