jquery实现浮动层效果

层可以随着页面滚动而滚动,说明肯定是脱离了标准流的,CSS样式表 position:absolute;因为是上下移动,所以
就是要改变层的CSS样式中的top属性定位),在jquery中有一个scrollTop属性,用于获取页面滚动的高度。所以在每次页面滚动
的时候,将浮动层的高度设置为 (初始值)+ scrollTop即可。  但是scrollTop在ie和其他浏览器中的获取有不一样,可以通过
如下方式
:       var bodyTop = 0;
            if (typeof window.pageYOffset != 'undefined') {
                bodyTop = window.pageYOffset; 
          } else if (
typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
{                bodyTop = document.documentElement.scrollTop;            }
            else if (typeof document.body != 'undefined') { 
              bodyTop = document.body.scrollTop; 
          }

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2  <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script type="text/javascript" src="../jquery-1.3.1.js"></script>
7 <!--/*以为是上下滚动,所以搞改变滚动的top属性(绝对定位),在jquery中有一个scrollTop属性,用于获取页面滚动的高度。所以在每次页面滚动的时候,将浮动层的高度设置为 (初始值)+ scrollTop即可。
8
9 但是scrollTop在ie和其他浏览器中的获取有不一样,可以通过如下方式:
10 var bodyTop = 0;
11 if (typeof window.pageYOffset != 'undefined') {
12 bodyTop = window.pageYOffset;
13 } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
14 bodyTop = document.documentElement.scrollTop;
15 }
16 else if (typeof document.body != 'undefined') {
17 bodyTop = document.body.scrollTop;
18 }
19 */-->
20
21 <script type="text/javascript">
22 jQuery(document).ready(function($){
23 $(window).scroll(function() {
24 var bodyTop = 0;
25 if (typeof window.pageYOffset != 'undefined') {
26 bodyTop = window.pageYOffset
27 } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
28 bodyTop = document.documentElement.scrollTop
29 } else if (typeof document.body != 'undefined') {
30 bodyTop = document.body.scrollTop
31 }
32 $("#hellobaby").css("top", 250 + bodyTop)
33 });
34 });
35
36 </script>
37 <style type="text/css">
38 #hellobaby {
39 background:#000;
40 color:#fff;
41 border:1px solid #B3B3B3;
42 font-size:14px;
43 right:0;
44 position:absolute;
45 top:250px;
46 opacity:.7;
47 filter:alpha(opacity=70);
48 padding:10px;
49 }
50 #hellobaby a {
51 color:orange;
52 text-decoration:none;
53 }
54 .closebox {
55 position:absolute;
56 right:5px;
57 top:0;
58 }
59 </style>
60 </head>
61 <body>
62 <div style="height:1600px;">
63 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
64 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
65 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
66 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
67 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
68 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
69 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
70 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
71 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
72 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
73 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
74 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
75 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
76 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
77 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
78 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
79 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
80 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
81 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
82 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
83 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
84 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
85 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
86 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
87 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
88 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
89 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
90 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
91 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
92 </div>
93 <div id="hellobaby"> 推荐您 <a href="http://www.ilovebeyond.com" target="_blank">点击这里</a> 订阅我爱beyond网 o(∩_∩)o
94 <div class="closebox"> <a href="javascript:void(0)"onclick="$('#hellobaby').slideUp('slow');$('.closebox').css('display','none');" title="关闭">×</a> </div>
95 </div>
96 </body>
97 </html>
posted @ 2011-06-05 00:37  gongxiao  阅读(3454)  评论(0编辑  收藏  举报