側欄跟隨滾動的簡單實現(xiàn)代碼
更新時間：2013年03月18日 14:28:32 作者：
側欄里的有些內容滾動到頁面頂端以后就固定在那個位置，不再跟隨滾動條而滾動，想必很多站長朋友都想實現(xiàn)這個效果吧，接下來為大家詳細介紹下，感興趣的你可不要錯過了哈
瀏覽網站時經?？吹接械木W站上，側欄里的有些內容滾動到頁面頂端以后就固定在那個位置，不再跟隨滾動條而滾動。這種效果叫做“側欄跟隨滾動”。它對于那些不希望被滾動到頁面之外的內容是非常有用的。
側欄跟隨滾動的實現(xiàn)方法有很多種，比較常見的有兩種，這兩種方法在NEOEASE寫的一篇文章中介紹的很清楚，一種是借助jQuery來實現(xiàn)，這種方法對于那些平時不需要加載jQuery庫的網站來說，顯然是一種負擔（jQuery現(xiàn)在是越做越大了……）。另外一種方法是通過原生javascript編寫的效果，這種方法相比上一種，要輕盈得多。但是，我還是不夠滿足，原生的javascript寫的文件也有4K多，對于我這種至簡至上的人來說，還是太繁雜了。那么有沒有更簡單的實現(xiàn)辦法呢？
答案當然是肯定的。下面具體介紹。
先說html文件（當然也可是動態(tài)文件，里面總歸有html代碼的）
<div id="box">
<div id="float" class="div1">
在這里加入需要跟隨滾動的內容
</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文件中再調用）
(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，大功告成，夠簡單吧。
最后給個 示例。
側欄跟隨滾動的實現(xiàn)方法有很多種，比較常見的有兩種，這兩種方法在NEOEASE寫的一篇文章中介紹的很清楚，一種是借助jQuery來實現(xiàn)，這種方法對于那些平時不需要加載jQuery庫的網站來說，顯然是一種負擔（jQuery現(xiàn)在是越做越大了……）。另外一種方法是通過原生javascript編寫的效果，這種方法相比上一種，要輕盈得多。但是，我還是不夠滿足，原生的javascript寫的文件也有4K多，對于我這種至簡至上的人來說，還是太繁雜了。那么有沒有更簡單的實現(xiàn)辦法呢？
答案當然是肯定的。下面具體介紹。
先說html文件（當然也可是動態(tài)文件，里面總歸有html代碼的）
復制代碼 代碼如下:
<div id="box">
<div id="float" class="div1">
在這里加入需要跟隨滾動的內容
</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文件中再調用）
復制代碼 代碼如下:
(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，大功告成，夠簡單吧。
最后給個 示例。
相關文章
hasOwnProperty這個方法是用來查找一個對象是否有某個屬性,且查找的屬性必須是對象本身的一個成員,但是不會去查找對象的原型鏈,文中介紹了使用示例代碼及使用時可能會遇到的問題,對hasOwnProperty報錯原因分析及解決方法感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)簡單評論功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
javascript筆記 String類replace函數(shù)的一些事
加固javascript基礎知識目的是為以后研究jQuery源碼做好鋪墊。2011-09-09
這篇文章主要介紹了JavaScript 實現(xiàn)輪播圖特效，幫助大家更好的制作網頁，完成需求，感興趣的朋友可以了解下2020-11-11
本篇文章主要介紹了微信小程序之多文件下載的簡單封裝示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
排序算法的理解算是程序員的基本功之一了，其功能是對一個數(shù)據元素集合或序列重新排列成一個按數(shù)據元素某個項值有序的序列。2011-02-02
這篇文章主要給大家介紹了Array對象去除重復項的相關資料，文中通過示例代碼詳細介紹了在ES5和ES6中Array對象去除重復項的方法，需要的朋友可以參考借鑒，下面來一起看看吧。2017-04-04
JS建造者模式是一種創(chuàng)建型設計模式,它可以用于構建復雜對象的創(chuàng)建過程,將對象的構建步驟和表示分離,以便能夠靈活地構建不同的對象,本文將通過代碼示例給大家詳細的介紹一下JS建造者模式的用法,需要的朋友可以參考下2023-08-08
下面小編就為大家?guī)硪黄獪\談幾種常用的JS類定義方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
JS前端知識點總結之頁面加載事件，數(shù)組操作，DOM節(jié)點操作，循環(huán)和分支
這篇文章主要介紹了JS前端知識點總結之頁面加載事件，數(shù)組操作，DOM節(jié)點操作，循環(huán)和分支,結合實例形式總結分析了JS頁面加載事件，數(shù)組操作，DOM節(jié)點操作，循環(huán)和分支所涉及的相關事件、函數(shù)及操作注意事項,需要的朋友可以參考下2019-07-07