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