100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > css 侧栏跟随_如何实现博客的侧栏跟随(滚动条)效果

css 侧栏跟随_如何实现博客的侧栏跟随(滚动条)效果

时间:2019-10-20 09:29:10

相关推荐

css 侧栏跟随_如何实现博客的侧栏跟随(滚动条)效果

现在许多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(){

varoDiv=document.getElementById("float");

varH=0,iE6;

varY=oDiv;

while(Y){H+=Y.offsetTop;Y=Y.offsetParent};

iE6=window.ActiveXObject&&!window.XMLHttpRequest;

if(!iE6){

window.οnscrοll=function()

{

vars=document.body.scrollTop||document.documentElement.scrollTop;

if(s>H){oDiv.className="div1div2";if(iE6){oDiv.style.top=(s-H)+"px";}}

else{oDiv.className="div1";}

};

}

})();

注:这段代码可放入任意JS文件中,比如我放在了util.js 文件里,。 zblog《低调与华丽》模板的用户可直接下载该JS文件替换。

网页代码部分:

这里写你网站的代码与标签。

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。