󰅡收起

郑元水博客

记录自己的成长之路。微信/QQ:150505055

07
二月

4步实现网站侧边栏随浏览器滚动效果

作者: 郑元水
分类: 网站建设
发布时间: 2013-02-07 15:56

看到很多的网站都有侧边栏滚动效果,侧边栏滚动效果可以增加网站的美观度,最近我也在自己的博客中实现了侧边栏随浏览器滚动效果。采用JS+CSS来实现。假如你也想在网站中添加网站侧边栏滚动效果,可以跟着下面的步骤进行操作。

1、在CSS样式中添加以下的代码

/*侧栏跟随*/

#box{float:left; position:relative;width:250px;}.div1{width:250px;}.div2{position:fixed;_position:absolute;top:0;z-index:250;}

2、新建一个JS文件,命名为1.js(名字任意写),添加以下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";}    
       };
   }

})();

3、在网站的侧边栏或者网站底部文件放入JS调用代码


4、将下面的DIV代码放入网站的侧边栏

这里放置个人要添加的广告代码

第4步中的文字根据个人的需要进行添加,可以在网站的某一个模块,也可以是CPA、CPS等广告联盟。

最后声明一下,本方法是在卢松松博客中找到的,郑元水本人只是对其操作步骤进行简要的说明,让站长朋友们更容易做到网站侧边栏滚动效果。

本文出自 郑元水博客 ,转载时请注明出处及相应链接。

本文永久链接: http://www.zhengyuanshui.com/397.html

3条评论

  1. 男人吃什么补精子 2013年2月16日 07:50 回复

    是我的不支持了吧

  2. 补肾壮阳的食物 2013年2月16日 07:50 回复

    没看到呢 不支持吗

  3. 康伟意 2016年1月28日 01:13 回复

    好贴,值得收藏,大家都顶

发表评论

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

代码在页面底部,统计标识不会显示,但不影响统计效果