hi,欢迎访问本站!
当前位置: 首页系统/服务器正文

css 侧栏跟随_WordPress侧栏跟随固定浮动效果完美解决方案

墨初 系统/服务器 1阅读

WordPress侧栏跟随固定浮动效果完美解决方案

关于“WordPress侧边栏跟随固定浮动效果”,网上一搜一大把,可真正能实现的没有几个,再加上教程写的都不那么完整,大家操作过程中就会遇到这样那样的问题,苦不堪言,百试而得不到解决,最后无奈放弃。下面我把自己怎么实现“WordPress侧边栏跟随固定浮动效果“的方法步骤给大家分享下,希望解决您的问题之后,您可以给一个回复(赞)。

1.卢松松代码(万能适用任何cms,推荐)

现在许多web2.0风格的网站都喜欢用“侧栏跟随”的效果,就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多、内容较长的网站。

这种特效对提高网站浏览量、文章点击率、广告点击量都有一定效果。目前郑州seo博客采用的是这样方法,效果实例演示:参照本文右下方

代码如下:

1.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文件中即可。

1.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.οnscrοll=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代码部分的后面出现(放在

标签:
声明:无特别说明,转载请标明本文来源!