如何实现博客的侧栏跟随（滚动条）效果
为了提高网站的浏览量或者广告的展示机会，现在不少博客都采用了侧栏跟随的效果，那么这种效果怎么实现呢？其实卢松松以前写过了一篇相关的文章，可能是太久了，还有不少人不知道怎么来实现，下面一起来回顾下松哥的这篇文章。
现在许多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文件替换。
网页代码部分：
<div id="box"> <div id="float" class="div1"> 这里写你网站的代码与标签。 </div>注：这里可以放文章列表、联盟广告，总之是个提高点击率的好方法。Z-blog用户把此段代码添加到single.html的侧栏位置即可。
特别提示：此代码试用与任何CMS系统，但该特效在IE6下无法实现，其余浏览器均没问题，同时侧栏其余部分应使用静态文件调用，使用JS调用栏目会出现代码重叠现象，调用联盟广告没问题。
以上是松哥之前的关于侧栏跟随的文章。不过还有两点需要注意一下的。
1，侧栏其余部分一定要是静态的。不然会出现重叠的现象。
2，JS文件可以直接放在html文件里或者被该文件调用的其他JS文件中，但是JS文件一定要在上面网页代码的后面调用，否则无法实现跟随效果。
留言列表: