➥
<nav>에 .navbar sticky-top
클래스를 주면;
해당 요소는 설정된 (뷰포트 기준)오프셋에 도달할 때까지는 일반 흐름으로 스크롤되다가,
설정된 오프셋 지점에 이르면 position: fixed;
값을 준 것처럼 그 위치에 고정된다
- 곧, 뷰포트가 해당 요소를 지나쳐가며 스크롤할 때에도 요소 자체는 설정된 오프셋 값에 맞춰 자기 자리를 고수하는 것이다!
➥
고정 내비게이션 바는 position: fixed;
속성을 사용하는데,
이는 DOM의 정상적인 흐름으로부터 가져오는 것이므로 다른 요소와의 겹침을 방지하기 위해
사용자정의 css(예컨대, padding-top
)가 필요할 수도 있음을 의미한다!