안녕하세요.

현재, 모바일에서 상단 메뉴가 스크롤을 내리나 안내리나

언제나 고정으로 계속 노출되고 있는데요(레이아웃 : 네온, 예전의 플랫)

 

Want : 스크롤의 위 아래 방향에 따라 상단메뉴(바)를 숨기거나 나오게 하고 싶어요

 

 

 

 

Why : 언제나 상단에 메뉴가 노출되는것보다, 글을 탐색할 시에는 숨기는게 활용측면에서 용이하다고 보여져서인데요

 

예를 들어 theqoo.net 모바일 이라든지 seiyon.net 모바일을 보면 , 스크롤에 따라 TOP메뉴가 스무스하게 나타났다 사라졌다합니다. theqoo는 스크롤을 올릴시, 최상단에 도착해야만 튀어나오는 형태이고 seiyon은 위치에 관계 없이 스크롤을 올리는 순간 메뉴가 훅 튀어나옵니다.(맛집상권 게시판을 클릭하면 비로그인 상태에서도 확인가능) 

이 둘 중에는 후자의 경우가 좀 더 편리하다고 느껴졌습니다.

(이외에도 dtelepathy.com이라든지 검색해보면 이와같은 상단바의 사라짐 형태는 많이보이고있음)

 

 

 

 

 

 그래서 후자와 같이 수정해보려 구글을 했는데 마침

"스크롤을 감지하여 사이트의 헤더를 보이거나 숨기기"라는 글을 찾아서 (http://webdir.tistory.com/481)

코드를 따라 해보았는데요

 

(이 사이트에서 알려준 코드 HTML, CSS, JS를 각각 한눈에 정리된게 http://jsfiddle.net/mariusc23/s6mLJ/31/

에 있어서 이거보고 한번에 참조함)

 

문제는.... js파일에서 어떻게 수정해야할지 잘 모르겠어서 글을 남깁니다.

layout.js파일의 시작부분이 다음과 같은데, 이 부분을 나와있는 코드로 바꿔야할듯한데..(코알못 흑흑)

xetown에서 고견을 구합니다.

 

function documentLock(){
    var offset = jQuery(document).scrollTop();
    jQuery("body").css({"position":"fixed","top":-offset});
    jQuery("#header").addClass("colored");
    jQuery("#dummy").fadeIn(200);
}
function documentUnLock(){
    var offset = jQuery("body").offset().top;
    jQuery("html,body").css("position","static").scrollTop(-offset);
    jQuery("#header").removeClass("colored");
    jQuery("#dummy").fadeOut(200);
    jQuery("#loading").fadeOut(200);
    jQuery("#gnb").parent().animate({left: "-280px"}, {duration: 200, complete: function(){
        jQuery(this).hide();
    }});
    jQuery("section.popup_area").hide();
    jQuery("section.popup_warn").hide();
    jQuery("#content").find("div.popup_etc").hide();
}

 

 

 

  • ?
    저희 사이트도 이와 비슷한 기능을 도입했는데, 말씀하신 것으로만은 부족한 제 실력으로 짜기 어려워서... 그래도 비슷한 코드가 혹시 필요하실까봐 올려드립니다.


    if($fixedHeader.length)
    {
    var lastScrollTop = 0, delta = 20;
    $(window).scroll(function(event){
    var scroll = $(this).scrollTop();
    if(scroll >= $shrinkHeaderHeight){
    if(Math.abs(lastScrollTop - scroll) <= delta)
    return;
    if ((scroll > lastScrollTop) && (lastScrollTop > 0)) {
    removeHeader();
    }
    else{
    if(scroll + $(window).height() < $(document).height()) {
    showHeader();
    }
    }
    lastScrollTop = scroll;
    }
    else {
    removeHeader();
    }
    });
    }

    function removeHeader(){
    $fixedHeader.removeClass('shrink');
    $fixedSubHeader.removeClass('shrink');
    document.getElementById("logoimage").style.display = "block";
    document.getElementById("logoimage2").style.display = "none";
    if(logoDataSrc) $logoImg.attr('src', logo);
    }

    function showHeader(){
    $fixedHeader.addClass('shrink');
    $fixedSubHeader.addClass('shrink');
    document.getElementById("logoimage").style.display = "none";
    document.getElementById("logoimage2").style.display = "block";
    if(logoDataSrc) $logoImg.attr('src', logoDataSrc);
    }
  • ? ?
    답변 감사합니다! 참고해서 수정해볼게요!!