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 도 썼네요..
더 간단한 방법이 있어요... 거의 이렇게 하지 않을까 하는데요.
FIXED 헤더 A 는 그냥 고정시키고요...
바디부분의 위쪽에 헤더A의 높이만큰 마진을 두던지
혹은 css { position:relative; top:헤더A의 폭; }
또는 B란 빈 DIV 레이어를 하나 두고 그 높이를 A만큼 주면 그냥 빈자리니까 그자리를 A가 덮어버리기 때문에 간단히 처리되죠....
코드를 정리하면
A { position:fixed; height:100px; }
바디 { margin-top:100px; }
또는
바디 스타일은 건드리지 않고
DIV.B { height:100px; }
이런식으로 하면 끝이죠
우와 감사합니다!!
