Question to say "I can!"

河北快三正规吗:侧栏跟随滚动条

2012-04-06

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

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 文件里,。 zblog《低调与华丽》模板的用户可直接下载该JS文件替换。

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

网页代码部分:

 

<div id="box">

<div id="float">

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

</div>
</div>

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

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

作者:admin | Categories:设计问题 | Tags: 、、、

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

  • 方言报站也是一种有意义的尝试 2019-05-22
  • 财经随笔:年近半百,“金融科技”仍是少年 2019-05-20
  • 山西寿阳:竹马戏演员的台前幕后 2019-05-19
  • 主城赏荷地图出炉 快带上相机出发 2019-05-19
  • 男人不安全了?日本读心美女机器人,你咋想的它全知道! 2019-05-03
  • 重庆市永川区:“1+8+X”模式探索基层人民调解新路子 2019-05-03
  • 春节我在岗:爸妈,儿子在军营给您们拜年了 2019-04-22
  • 传统文化,在中国文化里,居住是衡量一个家庭生活的基本因素。 2019-04-15
  • 俄韩就铺设途经朝鲜的天然气管道恢复磋商 2019-04-15
  • 经营者要想“我心换你心”,就要未雨绸缪,让不诚信的诱惑少一点,如此才能在市场中生存下来。反过来说,承担不起亏损就关门歇业,是否也是一种不诚信呢? 2019-04-11
  • 江西省能源集团公司党委副书记胡运生等2人被调查 2019-04-11
  • 乌鲁木齐:这个端午,他们的假日叫“坚守” 2019-03-29
  • 中国电信安康分公司60家智慧家庭便民服务中心盛大开业中国电信安康-最新活动 2019-03-28
  • 中心城区核心片组完成签约清零任务 2019-03-28
  • (Dos sesiones) Legislativo nacional de China concluye sesión anual Spanish.xinhuanet.com 2019-03-28
  • 209| 55| 721| 366| 883| 864| 423| 231| 69| 104|