jquery 질문 채택완료

6년 전 조회 2,099

2826885174_1552544172.3046.gif

 

해당 이미지를 보면 위에 top 메뉴바가 내려오면서 밑에 메뉴바가 툭 부딪히면서 같이 내려오는데

어떻게 해야하나요?

답변 2개

채택된 답변
+20 포인트

아래 코드는 로고가 있는 네비게이션이 시작부터 fixed css를 갖고있을때를 가정한 코드입니다

http://dvisign.com/g5/

엘리먼트 콘솔창에서 var oldpos 찾아보시면 해당 비슷한 코드가 있습니다

Copy
$(window).on("mousewheel DOMMouseScroll scrollstart scrollstop scroll",function(){

    var winpos = $("html").scrollTop();

    var fixpos = $("로고가있는 픽스네비게이션").height();

    var target = $("로스트아크 그림을 감싸고 있는 대상").position().top + fixpos ;   

    if (winpos >= target) {

        $("픽스할 네비게이션").css({ "position":"fixed","top":fixpos + "px" })

    } else {

        $("픽스할 네비게이션").css("position","static");

    }

});
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

onscroll 이벤트로 스크롤 위치를 계속해서 확인합니다.

이 위치가 특정 위치(질문하신 바에 따르면 부딪히는 위치)이상이 되는 경우 css상의 position:fixed, top:고정될 위치 옵션을 추가합니다.

특정 위치 미만이 되는 경우에는 이 옵션을 삭제합니다.

 

옵션을 class로 만들어서 class를 추가하고 제거하는 방식으로 하면 더 좋겠죠?

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고