国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > CSS > 正文

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

2024-07-11 08:36:34
字體:
來源:轉載
供稿:網友

一:這個效果有什么用
現在很多網站都有這種效果,比如月光博客,盧松松博客,當你一篇文章寫的較長,而且評論較多的時候,這個功能就可以幫你提高瀏覽量,用戶在你的博客里面的跳出率也會隨之減少。如果你在這放個廣告,效果會很不錯!
二:如何實現這個功能
親,采用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>
大功告成!
除非注明,胡小易博客文章均為原創

上一篇:DIV+CSS 兼容小集

下一篇:CSS Sprites詳解

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 谷城县| 达孜县| 金阳县| 康马县| 屯门区| 抚顺市| 双牌县| 台北市| 都安| 罗城| 西宁市| 阿拉善盟| 玉山县| 红河县| 博罗县| 柘城县| 富锦市| 新田县| 句容市| 香格里拉县| 永泰县| 尉氏县| 开化县| 和龙市| 文山县| 车致| 山东省| 慈溪市| 淮南市| 齐河县| 措勤县| 琼海市| 名山县| 巴南区| 田东县| 苍南县| 定安县| 丰都县| 保山市| 凌云县| 称多县|