层可以随着页面滚动而滚动，说明肯定是脱离了标准流的，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
>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
