WordPress侧栏跟随固定浮动效果

CSS部分：

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

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

注：每个网站的侧栏宽度不同，可根据你网页的宽度调整div1的宽度，Tigin主题用的是width:340px;，把这段代码添加到你的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";}   };   }   })();

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

//侧栏跟随   (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文件中。但是请注意，这个JS加载一定要在你的HTML代码部分的后面出现（放在</body>前边就行），否则不生效。

 

网页代码部分：

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

1 2 3 4 5 6

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

本文由 @张弦先生 原创发布.如若转载，请注明出处：张弦先生-chrafz.com » WordPress侧栏跟随固定浮动效果

htmlTiginWordPress技术

分享到：

赞(12) 打赏