首页 > 网站建设 > 侧栏跟随滚动条特效
十月9日

侧栏跟随滚动条特效

分类: 网站建设 丨 评论:0人 丨 浏览: 丨 发布时间:2015-10-09 04:07  

最近使用了卢松松提贡的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>代码即可。有兴趣的朋友不妨查看一下本文的源代码。

后记:上面我经过了将近一天的时间来测试才成功。现在把中间遇到的问题给有想用此效果的朋友说一下,希望能帮到大家。

分享到:
本文目前尚无任何评论.

发表评论