0. 작업 개요
스크롤을 할 때 항상 상단에 고정되어 있는 네비게이션 바를 만들어보자.
두가지 방법으로 진행해볼 예정이다.
1. CSS를 이용한 방법
2. JS를 이용한 방법
우선 CSS를 이용한 방식은 position : sticky, 혹은 fixed, 경우에 따라 absolute등으로
DOM의 위치를 띄우는 방식이 있는데,
sticky 속성은 특정 top까지는 relative, 즉 고정적인 상태로 있다가 해당 top 영역을 넘어가는 순간부터
fixed속성처럼 화면 위에서 따라다니게 된다.
fixed속성은 처음부터 화면을 기준으로 지정된 위치에 고정되있게 되는데,
이때 DOM의 영역을 실질적으로 차지하지 않아 콘텐츠가 덮이는 현상이 발생 할 수 있어
contetn 영역에 nav영역만큼 padding-top을 주는 등의 별도의 css로 조치를 해줘야 한다.
익스플로러도 없는 마당에 굳이 sticky를 쓰지 않을 이유가 없으니 sticky로 작성을 해보자면..
1. HTML
<nav>
<ul>
<li><a href="#">menu01</a></li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
</ul>
</nav>이렇게 생긴 nav DOM이 있다고 하면,
2. CSS
nav {
position: sticky;
top: 0;
left: 0;
width: 100%;
}이런식으로 position: sticky; 속성을 주면 해당 DOM이 설정된 top 위치에 맞는 화면에 도달하면
화면에 고정되어 따라다니게된다.
이때, 주의해야 할 점은 sticky속성은 기본적으로 처음에는 화면에 고정되지 않은 상태라서,
position: relative; 의 상태라고 생각하고, 초기 위치를 잡아두어야 한다.
즉 위의 nav DOM의 부모에서 display: flex; / align-items: center; 의 속성이 적용되어 있다면,
화면의 중앙에 위치하다가 해당 DOM이 top:0 , 화면의 상단에 맞닿을때 화면에 고정되게 된다.
3. JS
JS를 이용한 방법은 조금 더 다양한 방식으로 내가 원하는 방식대로 작동 기능을 컨트롤 할 수 있다는 장점이 있다.
전체적인 작동 방식은
1. window객체에 scroll 이벤트 리스너를 등록
2. 조건에 맞는 상황일 경우 nav DOM에 position: fixed 등의 속성 추가
3. 조건에 맞지 않는 상황일 경우 속성 제거
이렇게만 하면된다.
음.. 예를들어 스크롤이 내려갈경우 상단 네비가 고정되고, 우측 하단에 퀵버튼이 나타나는등의
이벤트들을 묶어서 관리하면 효율성이 더 좋다.
window.addEventListener('scroll', () => {
if(window.scrollY > 0){
document.querySelector('nav').classList.add('active')
}else{
document.querySelector('nav').classList.remove('active')
}
})이런식으로, window 객체의 scrollY를 받아서, 0보다 클 경우 nav 클래스에 active 속성 추가
(이 경우엔 미리 css에서 active 속성을 정의 해두어야 한다),
0이거나 0보다 작을 경우 active 속성을 제거하는 방식으로 작업 하면 된다.
