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를 다음 파일을 업로드해 교체합니다.

      (스크롤 효과 역치가 40px로 축소되고, body에 fixed class부여를 하지 않게 패치된 파일입니다.)


    ※이 블로그는 모바일에서도 페이지 하단의 PC화면 버튼을 통해 데스크탑 상단바를 확인할 수 있습니다!

    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon ENERGYN
      2014.07.08 09:18 신고

      와~! 감사합니다^^

    • BlogIcon 오렌지수박
      2014.09.20 12:03 신고

      저 혹시 이 블로그처럼 secondNavWrap의 위치나 크기 등을 조정하는 방법을 알 수 있을까요? 자꾸 물어봐서 죄송해요ㅠㅠ

      • BlogIcon 뭐하라
        2014.09.20 12:06 신고

        괜찮습니다 ^^
        간단히는 http://nubiz.tistory.com/496 이걸 적용하시면 되고,
        위치 크기조정방법은 css를 배우시는게 좋습니다.

      • BlogIcon 오렌지수박
        2014.09.20 20:27 신고

        감사합니다^^