[javascript] scroll 위치에 따른 navi bar 변경하기

자기소개 Page를 만들면서 Navi bar가 browser scroll의 motion에 따라 아래와 같이 움직이게 만들고 싶다는 생각이 들었다. jquery 쓰는 것을 좋아하지 않아 자바스크립트로만 작성했습니다! 

 

 

js file

위 코드를 보면 알 수 있듯이 NaviNavbar는 navibar의 id입니다. 

알고리즘은 다음과 같아요.

 

1. browser의 scroll이 움직일 경우 didscroll 은 true가 됩니다.

2. setInterval을 통해 0.25초 마다 브라우저가 움직였으는지 확인하고 ( didScroll === true ) 일경우 hasScrolled()를 실행시키고 didScroll을 false로 초기화 시켜줍니다. 

3. hasScroll()은 scroll의 모션의 경우에 따라서 navibar가 보이게 or 안보이게 합니다. ( 위 code를 통해 확인 할 수 있을거라 생각합니다. ) 

 

하단은 제가 설정한 css style 입니다. 

css