[header] 상단 메뉴바 스크롤 이벤트 변경 > 학습

<script> 
$(document).ready(function(){
	 var scroll_sw;
	 var scroll_top = 0;
	 var delta = 5;
	 var header_height = $('영역1').outerHeight();
			
	$(window).scroll(function(event){scroll_sw = true; });
	setInterval(function() { 
		if (scroll_sw) { 
			hasScrolled(); 
			scroll_sw = false; 
		} 
	}, 250); 
	function hasScrolled() { 
		var st = $(this).scrollTop();
		if(Math.abs(scroll_top - st) <= delta) return;
		if (st > scroll_top && st > header_height){ 
			$('영역1').css("opacity","0");
			$('영역2').css("opacity","1");
		} else {
			if(st + $(window).height() < $(document).height()) {
				$('영역2').css("opacity","0");
				$('영역1').css("opacity","1");
			} 
		} scroll_top = st; 
	}
});
</script>
<header>
	<div id="영역1"></div>
	<div id="영역2"></div>
</header>
<style>
	#영역1{opacity:1;-webkit-transition: opacity 0.5s; transition: opacity 0.5s;}
	#영역2{opacity:0;-webkit-transition: opacity 0.5s; transition: opacity 0.5s;}
</style>

상단 스크롤시 메뉴 변경 코드