화면 스크롤시 gnb 메뉴 fix하기
본문
고정시킬 gnb에 class를 추가하여 고정을 시켜놨는데
뭔가 자연스럽지가 않고 딱딱 끊기면서 고정이 되는데 (헤더 밑에 콘텐츠의 상단 부분이 가려짐)
이거 해결방법이 있을까요..?
$(document).ready(function() {
var jsOffset = $('.hdrWrp' ).offset();
$(window).scroll(function() {
if($(document).scrollTop() > jsOffset.top ) {
$('.hdrWrp').addClass('jsMnFixed');
}
else {
$('.hdrWrp').removeClass('jsMnFixed');
}
});
}
);
.hdrWrp.jsMnFixed {position: fixed;width: 100%;top: 0px;z-index: 999;}
제가 작성한 코드입니다.
답변 3
고정되는 부분에 메뉴 높이만큼 콘텐츠 감싸는 div의 margin을 주는 코드를 넣으면 되겠네요
고정해제 되면 margin을 0으로 넣어주고
if문 내
$("#wrapper").css("margin-top","200px");
else 내
$("#wrapper").css("margin-top","0px");
음 이렇게 하면 스크롤 이벤트가 발생할때마다 addClass 와 removeClass가 호출되는 거 아닌가 싶은데
$(document).ready(function() {
var jsOffset = $('.hdrWrp').offset();
$(window).scroll(function() {
if($(document).scrollTop() > jsOffset.top) {
if($('.hdrWrp').hasClass('jsMnFixed')) return;
$('.hdrWrp').addClass('jsMnFixed');
} else {
if(!$('.hdrWrp').hasClass('jsMnFixed')) return;
$('.hdrWrp').removeClass('jsMnFixed');
}
});
});
일케 클래스 여부도 한번 판정해주시는 것도 좋을 거 같아요. 쓰고 보니 딱히 위의 문제 해결책은 아닌듯. ㅎㅎ
.hdrWrp의 스타일에 transition이 적용되어있나요?
fix된 네비의 높이값을 주지 않아서 그랬던거였어요!
위으 ㅣ문제는 해결했는데 gnb가 fix되면서 콘텐츠의 상단 부분을 가리는건 어떻게 해결해야 할까요..?
음.... fixed 되면서 상단부분을 가리는건 어쩔수 없는거 아닌가요?
계속 따라오는 gnb를 만드시려고 한거같은데
다 가리는게 싫으시면 gnb 배경의 투명도를 조절하는 방법도 있습니다.
질문 의도가 이게 맞으신진 모르겠지만..
도메인이 없어서 정확한 이해가 어렵습니다
답변을 작성하시기 전에 로그인 해주세요.