jQuery 활용

scroll

window의 스크롤 top 값을 함수의 인자로 실시간으로 보내어 if문으로 클래스 콘트롤 방법 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>TEST를 해봅시다.</title>
<style>
*{margin:0;padding:0}
.wrap_test{height:1500px}
.box_1{height:50px;background:blue}
.box_2{height:500px;background:pink}
.fixed_on .box_2{position:fixed;top:0;left:50%;width:1000px;margin-left:-500px}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
    function stTop(t){
		if( t > 50 ){
			$('body').addClass('fixed_on');
		}else{
			$('body').removeClass('fixed_on');
		}
	}
	$(window).scroll(function() {
		var st = $(this).scrollTop();
		stTop(st);
	});
});
</script>
</head>
<body>
<div class="wrap_test">
	<div class="box_1"></div>
	<div class="box_2"></div>
</div>
</body>
</html>

댓글

댓글 본문