210219 상단 메뉴 스크롤에 따라 배경색 줬다가 투명하게

원래는 투명한 상단 메뉴를 스크롤바 내리면 배경색 줘서 메뉴 텍스트 잘 보이게 했다가 다시 상단 꼭대기로 돌아오면 투명하게 바뀌도록 하기.

 

HTML

<div id="hd_wrapper">
상단 메뉴 내용
</div>

 

CSS

#hd_wrapper {width:100%;height:120px;}

 

JS : jquery-ui.js 파일 import 필요!

$(document).ready(function() { 
	cnt=0;
	$(document).scroll(function() {
		cnt = $(this).scrollTop();
		if (cnt> 210) {
				//1 배경색 노 투명
				$('#hd_wrapper').stop().animate({'background-color':'#fff'},50);
				//2 : 배경색 투명도 주기
				$('#hd_wrapper').stop().animate({'background-color':'rgba(255,255,255,0.5)'},50);
		} else {
			$('#hd_wrapper').stop().animate({'background-color':'transparent'},30);
		}
	});
});