화면 스크롤시 gnb 메뉴 fix하기

화면 스크롤시 gnb 메뉴 fix하기

QA

화면 스크롤시 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이 적용되어있나요?

음.... fixed 되면서 상단부분을 가리는건 어쩔수 없는거 아닌가요?
계속 따라오는 gnb를 만드시려고 한거같은데
다 가리는게 싫으시면 gnb 배경의 투명도를 조절하는 방법도 있습니다.
질문 의도가 이게 맞으신진 모르겠지만..
도메인이 없어서 정확한 이해가 어렵습니다

답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT