얼렁뚱땅코드/그누보드

상단에 메뉴 고정시키기_sticky navbar

얼렁뚱땅 디자이너 2020. 11. 21. 14:56
<div id="gnb">
.
.
.
</div>

//먼저 코드를 입력한 후

<style>
	#gnb{position: fixed; z-index: 10; width: 100%;}
</style>

//포지션 고정으로 스타일을 주고

<script type="text/javascript">
	$(function(){
			$(window).scroll(function(){
				var nowScroll = $(document).scrollTop();
				// 스크롤 값이 120보다 크다면 gnb 나타나도록 만들기
				if(nowScroll > 120){ //     !=0
						$('#gnb').css('top', '0');
					}
				else{
							$('#gnb').css('top', '121px');
						}
			});
		});
</script>

//만약 스크롤 값이 120보다 크다면
#gnb의 css 값은 탑 0이 되어야하고
만약 그렇지 않다면 #gnb의 css 값은 탑 121px만큼 떨어지게 하라는 뜻임

//그리고 메인 높이를 네비의 높이만큼 내려야 자연스러운 느낌이 남