JS+CSS實現側邊欄跟隨浏覽器滾動效果

看月光博客，盧松松博客，文章頁的側邊欄都可以隨著浏覽器滾動而停留在頁面，羨慕了吧。其實我們也可以用這種特效的呢。下面，就講講如何實現這個效果吧~這個是盧松松博客原創的，我稍稍介紹了一下而已哈！

一：這個效果有什麼用

現在很多網站都有這種效果，比如月光博客，盧松松博客，當你一篇文章寫的較長，而且評論較多的時候，這個功能就可以幫你提高浏覽量，用戶在你的博客裡面的跳出率也會隨之減少。如果你在這放個廣告，效果會很不錯！

二：如何實現這個功能

親，采用JS+CSS就可以實現這個功能了

三：實現側邊欄跟隨特效的方法

CSS：

/*側欄跟隨*/

#box{float:left; position:relative;width:250px;}.div1{width:250px;}.div2{position:fixed;_position:absolute;top:0;z-index:250;}

如貴站的側邊欄寬度不是250px，請另行修改！

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";}

};

}

})();

這段代碼是用於js文件中，然後引用，引用方法是在貴站需要實現這個功能的網頁中如這樣引用：

<script type="text/javascript" src=“http://***.com/wp-content/themes/ihxy/js/util.js”></script>

大功告成！

除非注明，胡小易博客文章均為原創，轉載請以鏈接形式標明本文地址

本文地址：http://huxiaoyi.com/website/20120624.html