티스토리 북 클럽 스킨 상단메뉴 고정하기

Contents

 

개요

티스토리 북 클럽(Book Club) 스킨에서 상단 로고 및 메뉴의 위치를 고정하는 방법

스킨 편집의 CSS 탭에서 아래와 같이 #header, #aside, #dimmed 를 수정하면 된다.

STEP 1 - HTML #header 수정

수정전 :

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

수정후 :

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

STEP 2 - HTML #aside 수정

수정전 :

#aside {
	float: right;
	width: 21.296296296296296%;
	padding: 75px 0 32px;
	box-sizing: border-box;
}

수정후 :

#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;
}

STEP 3 - HTML #dimmed 수정

수정전 :

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

수정후 :

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