티스토리 블로그 북클럽 스킨 상단메뉴 부분 고정하기(CSS)

티스토리 블로그 북클럽 스킨에서 상단 메뉴(로고, gnb 메뉴 부분) 고정 방법에 대해 포스팅한 많은 글이 있는데, 간단하게 구현하는 방법을 공유한다. 

CSS에서 #header, #aside, #dimed 세 부분만 수정하면 된다. 

1. 헤더 부분 수정 : #header

먼저 스킨 편집의 CSS 탭으로 들어가서

 

118~120번째 줄에 가 보면 #header 부분이 원래는 아래와 같이 되어 있는데 

#header { border-bottom: 1px solid #eee; }

 

이걸 아래 코드로 바꾼다. 

하단 테두리를 없애고, 스크롤을 내려도 메뉴바가 항상 위에 떠 있을 수 있게 Z축 상의 위치를 최상위로 올리고(1010), 배경을 흰색으로 지정해서 스크롤 시 컨텐츠가 비쳐보이지 않게 하고, 상단메뉴 위치를 고정하게 수정한 코드이다. 

#header { z-index:1010; background-color:#fff; box-sizing:border-box; position:sticky; position:-webkit-sticky; top:0; }

2. 모바일 사이드바 탭 수정 : #aside

header만 고정하면 모바일에서 사이드바 탭을 열었을 때 사이드바가 헤더 밑에 깔리는 문제가 생긴다. 

이를 해결하기 위해, CSS에서 2491번째 줄의 #aside 코드에서 'z-index:400;'을 'z-index:1030'으로 바꾼다. 

사이드바를 열었을 때 사이드바가 상단메뉴 위로 뜨게 Z축 상의 위치를 끌어올리기 위해서다. 

#aside { position:fixed; top: 0; right:-278px; z-index:1030; float:none; overflow:auto; width:278px; height:100%; padding:94px 24px 40px; background-color:#fff; box-sizing: border-box; transition:left .5s; -webkit-transition:right .5s; }

3. 모바일 사이드바 탭을 띄울 때 어두워지는 부분 수정 : #dimed

마지막으로, #dimed 부분의 'z-index'를 'z-index:1020'으로 바꾸어서 모바일에서 사이드바 탭을 띄웠을 때 상단메뉴도 같이 어두워지도록 Z축을 조정해 준다.

즉, Z축을 1000보다 높은 숫자들로 조정하되, 숫자 크기가 #aside > #dimmed > #header 순으로 작아지게 조정하면 된다. (이미 스킨 내에 Z축 값이 1000인 #acc-nav가 있으므로 1000보다 크게 잡아야 한다.)

#dimmed {position:fixed; top:0; left:0; z-index:1020; width:100%; height:100%; background-color:rgba(0,0,0,0.6);}

그러면 이렇게 간단하게 메뉴가 고정된다