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

본문 바로가기

사이트 내 전체검색

425,060명이 방문해 주셨습니다.

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

작성일 20-07-29 16:20

페이지 정보

작성자IPFT 조회 245회 댓글 0건

본문



<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>
상단 스크롤시 메뉴 변경 코드

댓글목록

등록된 댓글이 없습니다.

Copyright © 소유하신 도메인. All rights reserved.