网页特效 侧栏跟随代码

web2.0风格的网站都很喜欢“侧栏跟随”,这种网页特效就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多、内容较长的网站,这种侧栏跟随网页特效的目的是跟随网络营销广告应运而生的,让网页跟随鼠标滚动的这部分内容更多的展现在浏览者眼前。

网页跟随鼠标滚动的网页特效代码叫做 侧栏跟随代码

HTML部分:

<div id=”box”>
<div id=”float”>
在这里加入需要跟随滚动的内容
</div>
</div>

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文件中,比如我放在了util.js 文件里,或者你也可以放在现有的JS文件里面添加上面这段JS也可以,这样就不用再在模板中添加一段引用JS文件的代码了。

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

可以不经允许随意转载,分享:广州SEO,移动互联网营销 » 网页特效 侧栏跟随代码

分享的每套dede模板,整站带数据源码,wordpress模板,整站源码下载,帝国cms模板,带数据帝国cms网站,淘宝客源码,女性网站模板等源码的下载链接地址请咨询QQ索取。
赞 (0)
分享到: 更多