-
七月31日
-
最近使用了卢松松提贡的zbolg模板，速度还不错。作为博客来讲，总体感觉和wordpress相比功能上还是差了不少。不管是插件方面，还是修改方面，以及编辑方面。不过做为插客来讲也是够用了，做优化起来也还算方便。好像扯远了一点，这里主要讲一下卢松松提供的一个“侧栏跟随滚动条”的研究。
由于本博客的侧栏比较单调，所以也想使用和卢松松一样有一个“侧栏跟随滚动条”的特效，方便浏览其它文章。（没有成功的朋友可以看完增加代码再看注意的地方）
此代码不支持IE6，其它都可以。在IE6下面将不会执行。此代码可以应用于任何CMS系统。
1、首先将下面代码加入加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文件中即可
2、将下面代码放入到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";}
};
}
})();注：这里我也按说明直接放入到util.js文件中了。
3、将下面代码放入侧栏中
<div id="box">
<div id="float" class="div1">这里写你网站的代码与标签。
</div>
</div>注：此标签中不能加入联盟广告，百度和谷歌都不可以。其它联盟广告看情况而定。
重要提示：
1、本人按以上方法安装后重建文件发现依然没有效果。经过多少研究，发现调用util.js时，此文件需要放到最后执行，也就是将<script type="text/javascript" src="http://smxr.com/themes/LuSongSong/script/util.js"></script>这段代码放到</body>前面执行，不要放到<head></head>之间。默认zbolg的util.js是放头部。
2、上面的操作做完后，又发现了一个新的问题。此代码在IE6上运行，会出现文章有轻微移位，看上去很不美观。经过测试只要在<div id="box">代码前面加入<dl class="widget recent-posts"></dl>代码即可。有兴趣的朋友不妨查看一下本文的源代码。
后记：上面我经过了将近一天的时间来测试才成功。现在把中间遇到的问题给有想用此效果的朋友说一下，希望能帮到大家。
原创文章请注明转载自生命线电脑技术
本文地址：http://smxr.com/post/celangensuigundongtiaotexiao.html
- 评论:(0)
- 隐藏评论
【已有0位网友发表了看法】