Fastboot 데스크탑 상단바 스크롤 애니메이션을 더 부드럽게!

iTIPs/티스토리 2014. 7. 7. 23:51

Fastboot 1.6 버전에는 태블릿 크기 이상 화면에서 역동적인 상단바가 추가되었습니다.

스크롤을 하기 전에는 넓게 있다가 아래로 스크롤을 하면 좁아지는 애니메이션이 있습니다.

그런데 속도를 중요시하는 Fastboot스킨인 만큼 로딩속도에 집중하다보니 스크롤 중간에 약간의 튐현상이 있습니다.

이번 포스트에서는 간단히 튐현상을 없애고 애니메이션을 좀더 부드럽게 해보겠습니다.

간단 수정 방법

HTML/CSS수정에서

style.css 맨 아래에 다음을 추가 후 저장합니다.

body{padding-top:160px}

#desktopNav{top: 0px}

#secondNavWrap {top: 130px}

#desktopNav,#secondNavWrap {

position: fixed;

width: 100%;

z-index:1000;

-webkit-transition: .25s;

-moz-transition: .25s;

-o-transition: .25s;

transition: .25s;

}

간단 수정 방법은 단순히 속성을 덮어 쓴것이므로,

추가로 약간의 수정을 더 해주시면 로딩속도나 처리프로세스를 줄이는 면에서 이득이 있습니다.

style.css에서 body.navFixed {~}항목을 찾아 삭제합니다.
#desktopNav.fixed와 #secondNavWrap.fixed를 찾아 position, width, z-index 가 있는 줄들을 삭제합니다. (나머지는 남겨두세요!)
HTML/CSS수정에서 파일업로드에 fastboot.min.js를 다음 파일을 업로드해 교체합니다.
fastboot.min.js
(스크롤 효과 역치가 40px로 축소되고, body에 fixed class부여를 하지 않게 패치된 파일입니다.)