jquery 부동층 효과 구현
39107 단어 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
>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
