그누보드 QA - javascript에서 페이지 화면을 헤더에 맞추는 방법이 있을까요??

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

곽은지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2019.06.14 11:56:32 2684 (210.♡.♡.153)

답변 2

본문

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

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

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

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

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

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

#javascript #스크롤 #원페이지

답변 2

toqurk 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2019-06-14 12:19:33 125.♡.♡.118

참고 : 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 값으로 돌리기 */
}
});
});