스크롤시에만 해더 이동
본문
반응형입니다..
스크롤이 내겨갔을때에만 해더높이와 안에로고랑 메뉴바가 해더높이에 맞춰서 올라가게 하고 싶은데 어떻게해야할까요? 이런건 뭐라고 찾아봐야할까요?
현재 메뉴슬라이드 js입니다.
<div> --> 해더
<a>태그로 왼쪽.로고.메뉴바
밑에 그외에 클릭시 나오는 메뉴가 있습니다.
</div>
이런식으로 html이 되어있고
아래와 같이 제이쿼리가 되어있는데요.
<script type="text/javascript">
$('.menu-trigger').click(function(){
$('.main_menu').hide();
$('.main_menu').css({'top':'-15px','position':'absolute'});
$('.i_call').css({'color':'#000'});
$('.menu-trigger2').show();
$('menu-trigger span:eq(1)').css({opacity:0});
$("#logo1").hide();
$("#logo2, .gnb_all_head, #gnb_all, .gnb_all_head").show();
$('#gnb_all h1').animate({opacity:1});
});
$('.menu-trigger2').click(function(){
$('.main_menu').show();
$('.main_menu').css({'top':'0px','position':'fixed'});
$('.i_call').css({'color':'#fff'});
$('.menu-trigger2').hide();
$('menu-trigger span:eq(1)').css({opacity:1});
$("#logo1").show();
$("#logo2, .gnb_all_head, #gnb_all, gnb_all_head").hide();
$('#gnb_all h1').animate({opacity:0});
});
</script>
도와주세요..
답변 3
http://pager.kr/x/index.php?mid=board_XLuz31&document_srl=2263
=> 해당 소스가 비슷한 소스인거 같습니다.
http://airwave.serverzero.kr/test.php
=> 실제 해보니 잘되는거 같습니다.
해더 스코롤시 상단 고정하는걸 말하는건가요?
스크롤 시 헤더가 상단에 고정되고 높이가 변하는 이벤트를 말씀하시는 거라면, $(window).scroll 이벤트를 감지해 현재 스크롤 높이에 따라 해당 헤더 부분 css를 변경하는 방법으로 position: fixed를 입력하실 수 있습니다. 색상이나 높이도 같은 방법으로 변경하실 수 있습니다.
