网站侧栏跟随代码教程

摘要： 网站新增了侧栏的跟随效果，哈哈。说真的这个很好用，无论是从用户操作体验还是增加本站的浏览都有很好的推动作用，尤其是放联盟广告，嘿嘿你懂得。。。废话不多说，具体网站主题代码，位置根据...

网站新增了侧栏的跟随效果，哈哈。说真的这个很好用，无论是从用户操作体验还是增加本站的浏览都有很好的推动作用，尤其是放联盟广告，嘿嘿你懂得。。。

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

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

 Markup

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

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

 CSS

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

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

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