当前位置:企创互联 > 新闻资讯 > 网站建设 > >

如何实现网站侧栏跟随滚动条滚动

发表日期:2014-08-05 11:36文章编辑:深圳网站SEO优化浏览次数:

很多站长可能会发现一个问题,当网页太长的时候,网站右侧就会显得很短,很难看,这不仅仅影响了网站的美观度,而且对于网站的用户体验也不好,如果实现网站侧栏跟随滚动条滚动,对提高网站浏览量、文章点击率、广告点击量都有一定效果,,这种效果适用于评论较多、内容较长的网站。这种特效。今天深圳网站建设专家企创互联网络中心就为大家讲解这个功能。

效果演示:

 

 

代码如下:

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

值得注意的事,网站JS代码要放在所加代码的后面,不然不会有效果!实现网站侧栏跟着滚动条滚动效果就是这么简单,一起来让你的网站炫起来吧!

文章为企创互联创作,转载请注明来自:http://www.szqchl.com.cn/wangzhanjianshe/55.html
最新新闻

网站建设如何带来好的收益?

网站是展示企业品牌的一个门面,随着会联网的飞速发展,很多...

日期:2021-04-19   浏览次数:

外贸企业做网站SEO优化有什么好处?

外贸企业做网站SEO优化有什么好处? 首要,咱们先了解国外独立...

日期:2021-03-16   浏览次数:

网站SEO优化如何选择好的域名?

1.有利于SEO优化的域名不要包括 - -不方便用户输入。其他的域名...

日期:2021-03-16   浏览次数:

新网站刚上线优化该如何做?

一个网站刚上线有很多事情要处理,比如死链接的检测,网站速...

日期:2021-03-15   浏览次数:

网站SEO优化人员必须掌握的5大刚要

网站SEO优化看起来很很简单,很多人都以为只是发发文章,发发...

日期:2021-03-15   浏览次数:

扬州SEO优化具体要求怎么做?

扬州SEO优化具体要求怎么做? 这是老生常谈的问题了,其实做扬...

日期:2021-03-12   浏览次数: