윈도우 관련 이벤트
ready() : 문서가 모두 로드되면 이벤트가 발생.
resize() : 윈도우의 사이즈가 변경될 때 이벤트가 발생.
sccroll() : 스크롤바를 움직일 때 이벤트가 발생
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<script>
$(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');
} else {
$('header').removeClass('bg');
}
});
});
</script>
<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>
</head>
<body>
<div id="wrap">
<header></header>
</div>
<div id="quick">QUICK</div>
</body>
</html>
