做one笔记

现在很多的独立博客和网站如人人网等，都使用了让侧边栏模块随滚动条滑动而位置固定的效果

当一个页面内容很长的时候，侧边栏栏目可能显得太短，当窗口滑动到靠下的位置，则侧边即失去了展示内容的机会。很多新闻资讯类网站如新浪、网易、CSDN等，会在边栏的右下角以固定的小弹窗形式，以提供更多的内容展示方式，但这并不适合博客和web2.0风格的网站。

现在很多的独立博客和网站如人人网等，都使用了让侧边栏模块随滚动条滑动而位置固定的效果。就是当一个页面很长的时候，设定侧栏内容会跟随滚动条，这种效果适用于评论较多、内容较长的网站。

做one笔记就运用了以下方法：

提高浏览量的特效：侧栏跟随滚动条

来源：卢松松博客

http://lusongsong.com/reed/453.html

CSS部分：

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

注：每个网站的侧栏宽度不同，可根据你网页的宽度调整div1的宽度，我的是width:293px;，把这段代码添加到你的CSS文件中即可。

JS部分：

JavaScript代码

//侧栏跟随    
(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文件中，比如我放在了global.min.js文件里。

网页代码部分：

代码如下:

<div id="box">  
<div id="float" class="div1">    
这里写你网站的代码与标签    
</div>  
</div>  

注：这里可以放文章列表、联盟广告，总之是个提高点击率的好方法。Z-blogPHP用户把此段代码添加到side.phpl的侧栏位置即可。

特别提示：此代码试用与任何CMS系统，但该特效在IE6下无法实现，其余浏览器均没问题，同时侧栏其余部分应使用静态文件调用，使用JS调用栏目会出现代码重叠现象，调用联盟广告没问题。

效果可以看本站：

当滚动到窗口顶部时候，就会固定跟随下滑...