乌徒帮技术范儿技术中心HTML代码 › 跟随滚动条上下滚动的浮动块

跟随滚动条上下滚动的浮动块

分类:HTML代码

在一些网站,我们总能发现当滚动条下下拉之后,边侧栏的某个区域会随之滚动条下滑,从而让原本空的边侧栏有了可用武之地。本文就来介绍来自卢松松的跟随滚动代码。

效果演示:

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

具体实例,请参见网络文摘栏目随机文章,未来主博客不一定会用。

代码如下:

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(){

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文件中

下载地址:http://lusongsong.com/themes/LuSongSong/script/util.js

网页代码部分:

?<div id="box">
<div id="float">

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

</div>
</div>

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

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

填写个人信息,赶快回复吧!