스크롤에 반응하는 헤더가 사이드 메뉴바를 갖고 있을 때의 오류
본문
스크롤을 아래로 내리면 헤더가 사라지고 위로 올리면 나타나는 모바일 헤더를 만들었는데요. 문제는 헤더에 사이드 메뉴바가 있는데 메뉴바를 누르고 별다른 이동 없이 메뉴바를 다시 닫았을 때 헤더에 준 스크립트 효과가 적용이 안됩니다 ㅠㅠ
그냥 fixed가 되어버려요.. 사이드 메뉴바를 눌러도 상관 없이 적용될 순 없을까요?
html은 헤더와 사이드바가 서로 형제 관계에 있고, 둘다 fixed 입니다. 사이드바를 헤더 안에 넣으면 구조가 망가지는 것 같고..
스크립트는 아래와 같이 적용한 상태입니다 ㅠㅠ
var lastScrollTop = 0;
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
if(scrollTop >= 100) {
if((scrollTop > lastScrollTop) && (lastScrollTop>0)) {
$('#header_scroll').css("top","-100px");
}
else {
$('#header_scroll').css("top","0px");
}
lastScrollTop = scrollTop;
}
});
답변을 작성하시기 전에 로그인 해주세요.