码迷,mamicode.com
首页 > Web开发 > 详细

(转)JS浮动窗口(随浏览器滚动而滚动)

时间:2014-04-28 17:17:45      阅读:563      评论:0      收藏:0      [点我收藏+]

标签:com   http   class   style   div   size   ext   width   strong   get   cti   

JS浮动窗口(随浏览器滚动而滚动)

往往用于一些联系方式,互动平台模块,随着浏览器的滚动而滚动。

 <div id="AdLayer">

<p>窗口中的内容</p>

</div>

放在<body>下面(页面最上面)

  

JS代码

window.onload=function(){

var n=0;//top值

var obj=document.getElementById("AdLayer"); //position:fixed对象

window.onscroll=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+‘px‘;}

window.onresize=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+‘px‘;}

}

 

CSS代码:

#AdLayer { background:url(../images/gj_3.jpg) no-repeat top center;

right:0; top:0; width:80px; height:235px; position:absolute; padding-right:10px;padding-top:75px; text-align:center;margin-top:150px;}

  

CSS代码分析,背景图片,大小宽80,高235,浮动,靠右上,窗口的内容居中,与上的距离为75,窗口跟上的距离为150,当然,,代码可随你自己的意,

(转)JS浮动窗口(随浏览器滚动而滚动),布布扣,bubuko.com

(转)JS浮动窗口(随浏览器滚动而滚动)

标签:com   http   class   style   div   size   ext   width   strong   get   cti   

原文地址:http://www.cnblogs.com/allearner/p/3695350.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!