상단 고정 반응형 다크모드 내비게이션 바: <nav> 요소의 .navbar fixed-top 클래스
☞
내비게이션 바 아래 최상단 컨테이너에서 style="padding-top: 54px;"로 상단 패딩을 주어
상단 톱 내비게이션 바에 의해 가려지지 않도록 설정해주었다 - 아니라면; 이 부분들은 상단 고정 메뉴바에 가려져 보이지않게 된다!
➥
<nav>에 .navbar sticky-top 클래스를 주면;
해당 요소는 설정된 (뷰포트 기준)오프셋에 도달할 때까지는 일반 흐름으로 스크롤되다가,
설정된 오프셋 지점에 이르면 position: fixed; 값을 준 것처럼 그 위치에 고정된다
- 곧, 뷰포트가 해당 요소를 지나쳐가며 스크롤할 때에도 요소 자체는 설정된 오프셋 값에 맞춰 자기 자리를 고수하는 것이다!
☞
상단 톱 내비게이션이 .fixed-top으로 작동하고 있으므로, 이 .sticky-top은 여기서는 작동되지 않습니다.
확인하려면; .fixed-top(만!)을 제거한 스티키 고정바 문서를 참조하십시오..