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>

大功告成!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM