[JS] 스크롤 내리면 나타나는 navBar(메뉴바) 구현

페이지가 길다면 메뉴바는 있어야 한다.

메뉴바가 없다면 header가 있는 곳까지 다시 오는건 비효율적이라고 생각하기 때문이다.

그래서 스크롤 시 상단에 메뉴바가 나타나게 구현해야 한다.

메뉴바를 고정시키면 되지 않냐고?

header가 작은 페이지는 별로 없는 것 같은데 페이지를 내릴 때마다 header가 딸려 온다면

그만큼 다른 내용이 보이지 않기 때문에 이것도 비효율적이다.

그래서 나타나게 할 메뉴바는 최대한 필요한 것들만 모이고 크기를 차지 않게 만들어야한다.

처음에는 엄청 어려울 줄 알았는데 검색해서 이해한 결과로는 누구나 가능하다.

 

필요한 태그 목록이다.

<header>
	헤더
</header>
<navbar>
	나타날 메뉴바
</navbar>
<section>
	본문
</section>

이런 형태를 가지기만 하면 되기 때문에 자신의 페이지에 맞게 커스터마이징하면 된다.

 

navBar를 안 보이는 영역에 숨겨 두었다가 js로 꺼내는 것이기 때문에 다음과 같이 navbar 설정을 해줘야 한다.

#navBar {
	position: fixed;
    top: -header.height;
    width: 100%;
    transition: top 0.5s;
}

-header.height란 헤더 태그 위에 둬야 하기 때문에 top에 - 값을 넣어 안 보이는 영역에 생성되게 한다.

0.5s는 메뉴바가 동작하는 속도이다.

 

마지막으로 JS로 스크롤 위치에 따라 top을 변경시켜 주면 끝이다.

<script>
	window.onscroll = scrollF();
    
    function scrollF() {
    	if(document.body.scrollTop > 200 || document.documentElement.scrollTop > 200){
        	document.getElementById('navBar').style.top = '0';
        }else{
        	document.getElementById('navBar').style.top = '-200px';
        }
</script>

header의 높이가 200이라고 했을 때를 예시로 작성했다.

스크롤 Top이 200이상이 되면 navBar의 top이 0이 되어 나타나도록 하는 코드이다.

반면에 200이하면 top이 -200px이 되어 보이지 않게 된다.