윈도우 관련 이벤트
페이지 정보
본문
이벤트 종류 | 설명 |
.ready() | 문서가 모두 로드되면 이벤트가 발생한다. |
.resize() | 윈도우의 사이즈가 변경될 때 이벤트가 발생한다. |
.scroll() | 스크롤바를 움직일때 이벤트가 발생한다. |
ex)
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
height: 2000px;
}
header {
height: 100px;
border-bottom: 1px solid #999;
}
header.bg {
background: #333;
}
#quick {
width: 100px;
height: 400px;
background: #ff6600;
color: #fff;
text-align: center;
position: absolute;
left: 100%;
top: 150px;
margin-left: -100px;
}
#quick.on {
position: fixed;
top: 50px
}
</style>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > $("header").height()) {
$("#quick").addClass("on");
} else {
$("#quick").removeClass("on");
}
}).resize(function() {
if ($(this).width() < 960) {
$("header").addClass("bg");
$("header").html("<font color=white>960보다 작다</font>");
} else {
$("header").removeClass("bg");
$("header").text("960보다 크다");
}
});
});
</script>
<div id="wrap">
<header></header>
</div>
<div id="quick">QUICK</div>
[실행내용]
1. 브라우저 width 크기를 조절해서 확인
2. 스크롤 위,아래로 조절해서 확인
댓글목록
등록된 댓글이 없습니다.