키스세븐지식
[스크롤 때 상단 고정 코드 - 상단 고정 레이어 스크립트]
스크롤 때 상단 고정 코드 준비하기
요즘은 메뉴 등의 일부가 스크롤해도 상단에 고정되는 CSS가 많이 쓰이고 있습니다.
웹브라우저에서의 상단 고정 레이어는 DIV나 nav 요소가 브라우저의 상단에 닿으면 먼춰 서서 계속 보이게 합니다.
상단 고정 레이어 CSS는 PC에서 뿐만 아니라 모바일 홈페이지를 만들 때도 아주 유용하게 사용할 수 있습니다.
상단에 고정되는 레이어를 제작하기 위해서는 준비물 1개와 HTML, PHP 파일과 CSS파일, 이렇게 두 가지가 필요합니다.
스크롤 상단 고정 레이어 CSS를 시작하기 전에 먼저 준비해야 할 것이 있습니다. 그것은 jquery입니다.
제작 중에 사이트 내에 jquery파일을 업로드 하거나 웹링크로 불러온 후에 진행해야 상단 고정 레이어를 작동시킬 수 있습니다.
만약 없다면 아래의 소스를 head파일에 삽입하여 로딩하도록 해야 합니다. (버전은 달라도 됩니다.)
<head.php 등에 삽입될 코드>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
다음으로 해야 할 것은 물론 개체입니다. DIV든 UL이든 클래스의 이름을 정해서 일반 페이지에 넣어 줍니다.
<index.php, head.php 등 필요한 페이지에 넣어 주는 코드>
<div class="아무거나">
상단에 배치될 코드
</div>
<div class="상단 고정 레이어 이름">
메뉴 등의 코드
</div>
클래스의 이름은 영문으로 적으면 되는데, 위의 개체를 예를들면 "아무거나" div는 스크롤하면 위로 사라질 부분이고 "상단 고정 레이어"인 div는 스크롤 되면 상단에 고정되어 계속 보여질 메뉴 등의 개체입니다.
상단 고정 레이어 스크립트
그러면 이것의 모양을 결정하는 CSS파일을 열어서 코드를 추가할 차례입니다.
<main.css 등의 CSS파일에 들어갈 상단 고정 레이어 CSS 코드>
.상단 고정 레이어 이름 {width:100%; margin:0 auto; background:#색상코드; z-index:1000; } // z-index로 우선 순위를 높게 한다.
.상단 고정 레이어 이름_Fixed { position: fixed; top: 0px; } // 임시로 만들어질 새 속성을 지정해 둔다.
특히 클래스 이름 뒤에 더 붙는 _Fixed 코드가 중요합니다. 아래 스크립트 코드에서 일반 레이어를 이 레이어로 바꿀 것이기 때문입니다.
마지막으로 다시 필요한 일반 페이지를 열어서 작업을 마무리합니다.
<index.php, head.php 등 필요한 페이지에 넣어 주는 코드>
<script>
$( document ).ready( function() { // 문서가 읽히는 것을 확인.
var jbOffset = $( '.상단 고정 레이어 이름' ).offset(); // 대상이 될 개체의 위치를 확인.
$( window ).scroll( function() { // 화면이 스크롤되면 작동.
if ( $( document ).scrollTop() > jbOffset.top ) { // 화면의 상단 높이와 대상 개체의 높이를 비교.
$( '.상단 고정 레이어 이름' ).addClass( '상단 고정 레이어 이름_Fixed' ); // 새 레이어 속성으로 바꾸기.
} // 화면 스크롤 부분의 코드를 종료.
else { // 위의 경우가 아니라면 작동될 코드.
$( '.상단 고정 레이어 이름' ).removeClass( '상단 고정 레이어 이름_Fixed' ); // 새 레이어 속성을 지워버리기.
} // 경우가 아닌 부분의 코드 종료.
}); // 화면 스크롤 작동 부분 종료.
} ); // 문서 읽히기 부분 종료.
</script>
스크롤 상단 고정 레이어 코드에서 주의할 점이 있습니다.
.상단 고정 레이어 부분 처럼 앞 쪽에 마침표가 있는 것을 빼 먹으면 안 됩니다. 오로지 한글로 되어 있는 부분만 필요한 class 이름으로 바꿔야 합니다.
스크롤 상단 고정 레이어 CSS는 필요한 대로 작성하면 되지만, 반드시 ".상단 고정 레이어 이름_Fixed"가 있어야 한다는 것도 기억해야 합니다.
여기서 가장 중요한 부분은 일반 페이지에 삽입하는 "$( '.상단 고정 레이어 이름' ).addClass( '상단 고정 레이어 이름_Fixed' );" 스크립트 부분입니다. 원하는 레이어의 높이를 따로 지정한 레이어 높이로 바꾸어 버리는 코드이기 때문입니다.
이렇게 하고 나면 웹브라우저에서 웹페이지를 읽다가 스크롤 했을 때 메뉴가 상단에 고정되어 더 이상 움직이지 않고 계속 보여지게 됩니다.
