티스토리 #1 스킨 - 마우스 스크롤 시 상단바 없애기

이번에는 티스토리 #1 스킨에서 마우스 스크롤 시 상단바를 Fade In/Out 효과에 대해서 적용해보도록 하겠습니다.

HTML / CSS 편집 페이지 열기

---

먼저 블로그 관리페이지에서 사이드바 메뉴 항목에 보면 HTML / CSS 편집 항목이 있습니다. 

다음 항목을 클릭하여 HTML/CSS 편집 페이지를 열어주세요.

HTML에 소스 코드 추가

---

HTML 항목에서 제일 하단으로 스크롤을 내려주시면 </body> 태그가 있습니다. 태그 바로 위쪽에 다음 코드를 넣어주세요.

script.txt

script.txt

---

<script>

$( document ).ready( function() {

$( window ).scroll( function() {

if ( $( this ).scrollTop() > 10 ) {

$('.area_head').fadeOut();

$('.tit_category').fadeOut();

} 

else { 

$('.area_head').fadeIn(); 

$('.tit_category').fadeIn();

} 

});

});

</script>

위와 같이 코드를 추가한 후 우측에 저장 버튼을 눌러 지금까지 작업했던 모든 항목들을 저장합니다.

이제 블로그로 이동하면 스크롤 시 상단바가 Fade In/Out 효과가 적용이 되어있는 것을 확인할 수 있습니다.