javascript에서 페이지 화면을 헤더에 맞추는 방법이 있을까요??

javascript에서 페이지 화면을 헤더에 맞추는 방법이 있을까요??

QA

javascript에서 페이지 화면을 헤더에 맞추는 방법이 있을까요??

본문

header를 포지션 fixed해서 원페이지를 제작하는데

스크롤해도 header는 계속 보여야 하구요 

header의 gnb를 클릭했을 때 스크롤되어서 그 섹션을 찾아갈 때 섹션의 윗 부분이 

header의 끝에 맞혀져서 페이지가 보였으면 좋겠습니다ㅠㅠ

 

그리고 그 섹션페이지가 모니터 해상도별로 꽉차게 보이는 방법도 있다면 같이 알려주세요ㅠㅠㅠㅠ

 

부탁드립니다!!!!!!

 

이 질문에 댓글 쓰기 :

답변 2

참고 : sub_nav는 따라 내려 보내는 div 의 ID 값입니다. 즉 header 의 id값으로 변경하시면되겠죠?


$(document).ready(function(){

    var nav = $('#sub_nav');
    var navoffset = $('#sub_nav').offset();  
    /* offset을 이용하여 .menu(메뉴영역)의 위치값을 알아내어 navoffset에 넣어둔다 */

    $(window).scroll(function () {
        if ($(this).scrollTop() >= navoffset.top) {  /* 화면 스크롤 값이 메뉴영역의 top보다 값이 커지면 */
            nav.css('position','fixed').css('top',0); /* 화면 위쪽에 고정시킨다. */
        }else {
            nav.css('position','absolute').css('top',260); /* 처음 메뉴영역의 top 값으로 돌리기 */
        }
    });
});

위 답변같이 하면 자바스크립트 쓰고 보아하니 JQurery 도 썼네요..

더 간단한 방법이 있어요... 거의 이렇게 하지 않을까 하는데요.

 

982268670_1560522786.254.png

 

FIXED 헤더 A 는 그냥 고정시키고요...

바디부분의 위쪽에 헤더A의 높이만큰 마진을 두던지

혹은  css { position:relative; top:헤더A의 폭; }

또는 B란 빈 DIV 레이어를 하나 두고 그 높이를 A만큼 주면 그냥 빈자리니까 그자리를 A가 덮어버리기 때문에 간단히 처리되죠....

코드를 정리하면

A { position:fixed; height:100px; }

바디 { margin-top:100px; }

또는

바디 스타일은 건드리지 않고

DIV.B { height:100px; }

이런식으로 하면 끝이죠

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

회원로그인

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