들어가기 전에
요즘은 CSS와 자바스크립트 등을 통한 모던하고 깔끔한 UI의 웹 페이지가 정말 많이 보입니다.
그리고 어떤 페이지는 좌측 또는 우측에 메뉴 영역, 또는 타이틀 영역이 존재하면서 반대 쪽에는 컨텐츠가 존재하고, 페이지를 스크롤할 때 사이드 영역만 고정이 되고 컨텐츠 영역만 스크롤이 되어 컨텐츠의 집중도를 올려주는 페이지도 드물지 않게 볼 수 있습니다.
이런 형태로 페이지를 만들면 '특정 영역까지만 스크롤을 했을 때 좌/우측 중 하나는 고정' 이 되는 인터랙션을 주어 보다 덜 심심하게, 더 재밌어보이게 웹페이지를 구성할 수 있습니다.
통상적으로 일정 부분까지 스크롤을 했을 때 특정 영역이 뷰포트 화면 내에 고정되는 것을 스티키(sticky)라고 부르고 있습니다.
우리는 그래서 이를 이용한 '스티키 사이드 메뉴' 를 만들 것입니다.
레이아웃 구성하기
이번 포스팅에서는 좌측에 컨텐츠 영역이 있고, 우측에 스티키 사이드바가 존재하는 형태로 레이아웃을 구성할 것입니다.
여러분들은 필요에 따라 왼쪽에 두셔도 됩니다.
스티키 사이드바를 구성할 때에는 무난하게 사용되고 있는 float 방식으로 레이아웃을 만들어도 되고, flexbox로 만들어도 모두 상관없습니다. 컨텐츠 영역과 사이드바 영역을 모두 감싸는 부모 요소 또한 필요하겠죠.
저는 형식상 간단한 헤더를 함께 작업해 주었습니다. (헤더는 별도의 인터랙션은 추가하지 않았습니다)
See the Pen Position sticky - float (1/2) by sootopia (@sootopia) on CodePen.
참고로, 본 예제는 별도의 반응형 처리는 하지 않았습니다.
따라서 코드 실행 결과의 모습이 깨져 보이시거나, 틀어져 보이신다면 [EDIT ON CODEPEN] 을 눌러 전체 모드에서 확인해 주세요!
상기 소스는 말 그대로 간단하게 레이아웃만 구현한 상태입니다.
따라서 스크롤을 하더라도 우측의 사이드바 (Sticky area) 부분은 원하는 것처럼 스티키 처리가 되지 않죠.
다음 스텝에서 두 가지 속성을 추가해서 스티키 처리를 진행해줄 겁니다.
position: sticky 속성과 top 값 지정하기
이제 본격적으로 사이드바에 스티키 처리를 해줄 것입니다.
여기서 필요한 것은 딱 두 가지입니다. 대상 요소에 position: sticky 속성과 top 값을 추가해 주기만 하면 됩니다.
top 값은 해당 요소가 스티키처리 되었을 때, 뷰포트 기준으로 상단에서부터 어느 정도 떨어진 위치에 고정시킬지를 정의하는 것입니다.
따라서, top 값을 20px 정도로 잡는다면 해당 요소의 위치까지 스크롤이 되었을 때, 화면 상단으로부터 20px 떨어진 지점에 고정이 됩니다.
바로 다음 예제를 통해 결과를 직접 확인해 보도록 할까요?
See the Pen position sticky - float (2/2) by sootopia (@sootopia) on CodePen.
우측의 Sticky area가 있는 지점까지 화면이 스크롤되면 자연스럽게 position이 fixed 속성을 갖는 것처럼 동작하게 됩니다.
정말 간단하죠?
앞서 두 가지 예제는 보편적으로 많이 쓰이는 float 방식으로 구현된 예제이지만, flexbox를 활용해도 구현이 가능합니다.
flexbox로 구현하기
기본적으로, display: flex 속성을 주어 레이아웃을 플렉스박스로 지정하면, 기본적으로 플렉스박스 내에 들어가는 요소들의 세로 정렬은 쭉 늘어나는, stretch 속성을 갖게 됩니다.
따라서 높이값을 별도로 지정해주지 않는 이상은 flexbox 요소의 바로 아래에 있는 요소들은 모두 같은 높이를 가지게 됩니다.
이에 따라 위에서 보여드린 float 방식을 통한 예제와 같이 스티키 처리할 요소의 높이는 따로 가져가면서 동일한 결과를 만들어 내려면 align-items 속성을 flex-start로 지정하면 됩니다.
바로 예제를 살펴볼까요?
See the Pen position sticky - flex by sootopia (@sootopia) on CodePen.
저는 개인적으로 float보다는 flexbox 방식을 선호합니다.
float를 따로 해제해줄 필요도 없을 뿐더러 훨씬 더 유연하고 강력하게 원하는 레이아웃을 만들어낼 수 있기 때문이죠.
정상적으로 동작되지 않을 경우
position: sticky 속성은 간단하면서도 편하게 스티키 레이아웃을 만들 수 있는 반면에, 다소 까다로운 사용 방법을 가지고 있는 것이 사실입니다.
만약 fixed 형태로 동작하지 않고 static 의 형태로만 동작한다면, 아래의 사항 중에 해당되는 사항이 있는지 체크해 보세요.
- top 값이 지정되어 있지 않는지 확인합니다.
position: sticky 는 반드시top, left, bottom, right속성 중 하나를 명시해야 합니다. - 부모 또는 조상 노드에 overflow 속성이 설정되어 있는지 확인합니다.
부모 또는 조상 엘리먼트에 overflow 관련 속성이 정의되어 있을 경우 static 의 형태로 작동됩니다. - 부모 노드의 height가 올바르게 설정되어 있는지 확인합니다. 부모 노드의 높이값이 명확한 값을 가지고 있어야 하며,
height: xx%와 같이 퍼센트로 지정된 경우에는 동작하지 않습니다. - sticky 로 동작할 요소의 부모 노드가 flexbox 일 경우, flexbox의 기본 세로 정렬값인 stretch가 아닌,
flex-start로 정의되어야 합니다.