層可以隨着頁面滾動而滾動，說明肯定是脫離了標准流的，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 >
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 >