[티스토리 꾸미기] 티스토리 북클럽 스킨 헤더 고정하기 | 스크롤 시 메뉴 자동 숨김 CSS

 

티스토리 북클럽 스킨 헤더 꾸미기

∶

티스토리 북클럽 스킨을 사용하다 보면 상단 헤더를 고정하면서도 메뉴 영역은 필요할 때만 표시하고 싶은 경우가 있습니다. 특히 모바일 환경에서는 메뉴가 항상 노출되면 화면을 차지해 콘텐츠에 집중하기 어려울 수 있습니다.

 

이번 포스팅에서는 헤더는 상단에 고정한 상태로 유지하고, 메뉴는 스크롤 방향에 따라 부드럽게 슬라이드되며 숨겨지는 효과를 적용하는 방법을 소개합니다. CSS와 JavaScript만으로 구현할 수 있어 별도의 플러그인이나 복잡한 설정 없이 바로 적용할 수 있습니다.

 

실제 적용 화면과 함께 필요한 코드를 자세히 정리했으니, 북클럽 스킨을 더욱 깔끔하고 편리하게 꾸미고 싶은 분들은 끝까지 참고해 보시기 바랍니다.

📌 알림 

웹서핑을 하다 보면, 제가 만든 코드나 태그 속성, 심지어 오탈자까지 그대로 가져가 본인 글처럼 사용하는 경우가 있습니다. 코드 자체의 복사는 막을 수 없지만, 제 자료를 활용해 관련 포스팅을 작성하실 때는 반드시 출처를 명시해 주시기 바랍니다.

이 코드는 웹상에 공개된 적 없는 직접 제작한 북클럽 스킨용 코드입니다.

그 외 개인적인 사용은 자유롭게 하시면 됩니다.

728x90

---

헤더 고정하기 | 스크롤 시 메뉴 숨김 미리보기

☑

헤더는 상단에 고정된 상태로 유지하면서, 사용자가 아래로 스크롤하면 메뉴가 부드럽게 슬라이드되어 숨겨지고, 페이지 최상단으로 돌아오면 메뉴가 다시 자연스럽게 나타나는 코드입니다.

 

---

CSS 코드를 추가하는 방법

☑

1. CSS 코드를 수정하기 위해 '관리자 홈'에서 꾸미기 → 스킨 편집 → HTML 편집 → CSS 탭으로 이동합니다.

---

2. CSS를 수정하기 전, Ctrl + F를 이용해 #header {와 #gnb { 코드를 검색합니다. 이후 아래 예시처럼 주석 처리하여 기존 코드를 비활성화합니다.

기존 코드를 삭제하지 않고 주석 처리하는 이유는 원본을 보존하기 위해서입니다. 추후 문제가 발생하거나 원래 상태로 되돌려야 할 경우, 주석만 해제하면 손쉽게 복원할 수 있습니다.

 

#header {

/* 헤더 메뉴 숨기기
#header {
  border-bottom: 1px solid #eee;
}
*/

 

#gnb {

/* 헤더 메뉴 숨기기
#gnb {
  height: 66px;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
}
*/

---

3. CSS 탭의 가장 아래쪽에 아래 CSS코드를 붙여 넣은 후, [적용] 버튼을 눌러 저장합니다.

/* ==================================
   헤더 전체 고정 및 메뉴 슬라이드
   Created by Galam
   For Tistory Book Club Skin 
================================== */
#header {
  z-index: 1010;
  background-color: rgba(255, 255, 255, 0.90);
  box-sizing: border-box;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  box-shadow: rgba(99, 99, 99, 0.2) 1px 1px 10px 0px;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease-in-out;
}
/* GNB 박스 전체 기본 상태 */
#gnb {
  max-height: 66px; /* GNB 박스 크기 */
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.2s ease;
  border-top: rgba(99, 99, 99, 0.2) 1px solid; /* GNB 박스 상단 라인 */
  display: flex;
  align-items: center;     /* 수직 중앙 정렬 */
}
/* 스크롤을 내렸을 때 (#header에 .hide-gnb 클래스가 붙었을 때) */
#header.hide-gnb #gnb {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
  pointer-events: none;
}
/* 모바일 전용 코드 추가 */
@media (max-width: 768px) {
  #gnb {
    font-size: 14px; /* 모바일에서만 글씨를 살짝 줄여서 밀림 방지 */
  }
}
/* 헤더 전체 고정 및 메뉴 슬라이드 END */

 

---

헤더 하단의 메뉴 크기 조정하기

☑

메뉴의 안쪽 여백(Padding)을 조정하여 메뉴를 원하는 크기로 맞춥니다

▼

---

1. CSS 탭에서 Ctrl + F를 이용해 #gnb ul li a { 코드를 검색합니다.

#gnb ul li a {

---

코드 내 padding: 값을 변경한 뒤, 좌측의 [미리보기]로 여백 크기를 확인하며 원하는 크기로 수정합니다. 만족스럽게 수정되었다면 우측 상단의 [적용] 버튼을 눌러 저장합니다.

#gnb ul li a {
  position: relative;
  display: block;
  text-decoration: none;
  padding: 14px 4px 14px; /*  22px 4px 24px; */
  color: #777;
}

---

HTML에 JavaScript 코드 추가하는 방법

☑

1. HTML 탭으로 이동한 후, 아래 <script>코드를 </body> 태그 바로 위에 붙여 넣은 후, [적용]버튼을 눌러 저장합니다.

<!-- ==================================
   헤더 전체 고정 및 메뉴 슬라이드
   Created by Galam
   For Tistory Book Club Skin   
================================== -->
<script>/*Galam*/let isScrolling=false;window.addEventListener("scroll",function(){if(!isScrolling){window.requestAnimationFrame(function(){let scrollTop=window.pageYOffset||document.documentElement.scrollTop;const a=document.getElementById("header");if(scrollTop<=0){a.classList.remove("hide-gnb")}else{if(scrollTop>46){a.classList.add("hide-gnb")}}isScrolling=false});isScrolling=true}},{passive:true});</script>
<!-- 헤더 전체 고정 및 메뉴 슬라이드 END -->

 

---

마무리

☑

지금까지 티스토리 북클럽 스킨에서 헤더는 상단에 고정하면서 메뉴 영역은 스크롤에 따라 부드럽게 숨겨지는 효과를 적용하는 방법을 알아보았습니다.

 

이 방법을 적용하면 화면 활용도를 높일 수 있을 뿐만 아니라 모바일 환경에서도 더욱 깔끔한 사용자 경험을 제공할 수 있습니다. 특히 콘텐츠에 집중할 수 있는 레이아웃을 만들고 싶은 분들에게 유용한 설정입니다.

 

북클럽 스킨은 CSS와 JavaScript만으로도 다양한 커스터마이징이 가능하므로, 자신의 블로그 스타일에 맞게 세부 디자인을 추가로 조정해 보시기 바랍니다.

---

관련글 바로가기

☑

블로그 상단의 '타이틀 로고' 크게 만들기 | 티스토리 북클럽 스킨

블로그 상단의 '타이틀 로고' 크게 만들기 | 티스토리 북클럽 스킨

티스토리 북클럽 스킨 | 스크롤 프로그레스 바(Progress Bar) 초간단 적용

티스토리 북클럽 스킨 | 스크롤 프로그레스 바(Progress Bar) 초간단 적용

여러분의 공감과 댓글은 큰 힘이 됩니다.✦ 가람과 함께하는 이야기 ✦

#티스토리메뉴숨기기 #티스토리상단메뉴 #티스토리헤더설정 #티스토리스크롤메뉴 #북클럽헤더고정 #북클럽메뉴숨기기