zblog侧栏跟随的方法
分类:zblog教程
27
该教程只适用于ZBlog,ASP版本和PHP版本都可以使用。别的程序请自测。
话不多说,直接上教程。
侧栏跟随一共有三个部分的代码,JS和CSS还有HTML
在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代码,可单独写在一个文件里面,然后调用。又或者写在HTML的/head之前。
//侧栏跟随(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";}
};
}})();大致就是这样子了,做好后可以看一下效果,然后用CSS调整美化一下即可。
上一篇:zblog教程
最新发布
-
zblog响应式自媒体博客主题63号
2026-04-08 -
zblog响应式资讯门户主题62号
2026-04-05 -
zblog响应式文章自媒体资讯主题61号
2026-04-01 -
zblog响应式自媒体资讯主题60号
2026-03-30 -
zblog响应式门户文章资讯主题59号
2026-03-29
热门文章
-
ZBLOG精品手赚APP应用下载主题19号
1225 -
zblog响应式机器设备企业主题10号
1220 -
zblog响应式生活分类信息主题2号
937 -
zblog响应式机械企业外贸主题6号
320 -
简洁大气zblog响应式文章主题52号
306