zblogphp侧栏跟随代码教程,看了就会。

最近一直没闲着,主题也没时间做,抽空把主题完善了一下,近期会更新到zbp应用中心。

但是本站新增了侧栏的跟随效果,源自卢松松博客,我不写代码,我只是代码的搬运工,哈哈。说真的这个很好用,无论是从用户操作体验还是增加本站的浏览都有很好的推动作用,尤其是放联盟广告,嘿嘿你懂得。。。

zblogphp侧栏跟随代码教程,看了就会。

废话不多说,具体网站主题代码,位置根据自己喜欢随意放,代码如下。

在HTML需要加入侧栏跟随的地方添加下面代码:

<div id="box">
<div id="float" class="div1">
需要跟随的代码或者联盟广告代码。
</div>
</div>

网站主题css代码:其中的widtu:250px,是指跟随之后的侧栏宽度,这个可以自定义,根据侧栏宽度修改。top:0px,是指距离网站顶部的距离值,一半导航栏不跟随的话默认即可,如果导航栏跟随的话需要自定义,具体根据实际情况,有不懂的可以留言。

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

JS代码,可单独写在一个文件里面,然后调用又或者写在HTML的</head>之前。建议放在主题的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";}
       };
   }})();

很简单的三段代码就可以实现zblogphp侧栏跟随的效果,代码来自卢松松博客。可以查看本站效果,CSS可以根据实际情况做出调整或者美化一下。

文章声明:以上内容(如有图片或视频亦包括在内)除非注明,否则均为网站名称原创文章,转载或复制请以超链接形式并注明出处。https://xz.itlaoli.com/blog/179.html

« 上一篇
下一篇 »

相关推荐

Linux手动分区挂载10TB磁盘到 /www目录并安装宝塔面板到数据盘的完整教程

2025年10月16日

434阅读

记录Windows11系统暂停更新怎么延长周数的教程

2025年08月25日

2849阅读

Windows11失败,提示“ahsProtector-你的电脑上有服务尚未准备好用于此版本的Windows”的解决方案

2025年08月21日

3310阅读

zblogPHP李洋个人博客主题使用网址导航模板的图文教程

2025年05月27日

5605阅读

百度普通收录API提交后提示 {"error":400,"message":"site init fail"}问题怎么解决?

2025年03月03日

5066阅读

zblog应用中心后台无法更新主题模板及无法新建标签的解决办法

2025年02月24日

6606阅读

发表评论

访客 访客
评论列表 (暂无评论,9928人围观)

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码