목표
스크롤 위치에 따라 화면 위쪽에 고정되는 내비게이션 바를 만들고 고정된 상태에서만 특정 버튼이 나타나도록 만들어 보자.
JS로만 만들기
강의에서 HTML과 CSS 파일을 제공해서 남은 JS 파일만 직접 완성해서 기능을 만들어 보았다.
헤더가 50vh로 설정되어 있어 스크롤이 화면의 50%를 넘어가면 내비게이션과 로고 버튼을 고정시켰다.
화면에 헤더가 나타나는 동안에는 로고가 보이지 않고 내비게이션 바가 제자리에 위치한다.
그러다 화면이 헤더 영역을 넘어가면 로고가 제일 왼쪽에 표시되고 내비게이션 바가 화면 위에 붙어서 움직인다.
그런데 사실 position 속성을 직접 바꿔주지 않더라도 relative와 fixed를 동시에 표현할 수 있는 방법이 있다.
직접 만들기
nav의 position을 sticky로 주면 한번에 해결할 수 있다. sticky는 평소에는 relative로 취급되지만 스크롤 될 때 화면을 벗어나지 않고 정해진 위치에 고정되므로 내비게이션 바를 만들 때 아주 유용하다.
이렇게 해도 로고를 보여주는 건 별도의 문제라서 JS로 해결했다.
작동 모습은 강의 예제와 동일하다.
새로 알게 된 점
sticky를 사용할 때 몇 가지 유의할 점이 있다.
-
부모 요소에 height 속성이 있어야 함.
sticky로 설정된 요소는 부모 요소 내에서만 고정되고 이때 부모 요소에 height가 설정되어 있어야 한다. 부모 요소가 body일 경우에는 height를 설정하지 않아도 자동으로 계산된다. -
고정될 위치를 지정해야 함.
top, left, bottom, right 중 하나 이상을 지정해야 한다. 화면에서 고정될 위치를 지정해야 하며 내비게이션 바는top: 0;만 지정하거나 필요에 따라left: 0;까지 지정하면 된다. -
부모의 overflow는 visible만 가능함.
당연하게도 부모 요소의 overflow가 hidden이나 scroll 등으로 설정되어 있으면 작동하지 않는다.
나는 position을 바꿔주는 방법과 sticky를 이용하는 두 가지 방법으로 문제를 해결했는데 강의에서는 body에 클래스를 추가하여 position을 바꿔주는 방법을 사용했다. 실제 기능이 JS와 CSS에서 복합적으로 실행되어 이해하기 어려운데 왜 이런 방식을 택했는지 모르겠다. 심지어 sticky에 대해서는 언급도 하지 않았다.
