안녕하세요.
현재, 모바일에서 상단 메뉴가 스크롤을 내리나 안내리나
언제나 고정으로 계속 노출되고 있는데요(레이아웃 : 네온, 예전의 플랫)
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);
}