Question to say "I can!"

側欄跟隨滾動條

2012-04-06

現在許多web2.0風格的網站都喜歡用“側欄跟隨”的效果,就是當一個頁面很長的時候,設定側欄內容會跟隨滾動條,這種效果適用于評論較多、內容較長的網站。

這種特效對提高網站瀏覽量、文章點擊率、廣告點擊量都有一定效果。

代碼如下:

CSS部分:

 

/*側欄跟隨*/

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

注:每個網站的側欄寬度不同,可根據你網頁的寬度調整div1的寬度,我的是width:250px;,把這段代碼添加到你的CSS文件中即可。

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文件中,比如我放在了util.js 文件里,。 zblog《低調與華麗》模板的用戶可直接下載該JS文件替換。

下載地址:http://lusongsong.com/themes/LuSongSong/script/util.js

網頁代碼部分:

 

<div id="box">

<div id="float">

這里寫你網站的代碼與標簽。

</div>
</div>

注:這里可以放文章列表、聯盟廣告,總之是個提高點擊率的好方法。Z-blog用戶把此段代碼添加到single.html的側欄位置即可。

特別提示:此代碼試用與任何CMS系統,但該特效在IE6下無法實現,其余瀏覽器均沒問題,同時側欄其余部分應使用靜態文件調用,使用JS調用欄目會出現代碼重疊現象,調用聯盟廣告沒問題。

作者:admin | Categories:設計問題 | Tags:

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 广东36选7走势图选7 北京pk105码5期全天不挂公式 微信群玩的内蒙古麻将 湖北十一选五彩票2元网 四川快乐12 上海快三精准计划 河北20选5最新开奖结果今期 日本av女优大全 天津十一选五走势图图 20选5开奖 下载18女孩黄色片电影 浙江11选5任选2 华东六省15选5奖池 无码A片迅雷下载 下载广东十一选五 澳洲幸运十在线计划