안녕하세요.. 상단 고정 div 레이어 스크립트에 대해서 설명드립니다~
1. head 태그 안에 스타일(css) 적용 (border, align, color padding 은 수정해서 사용하시면 됩니다^^)
<style> .topFixBanner { text-align: left; background-color: #ffffff; padding: 20px 0px 20px 20px; width: 100%; border-bottom:#666666 solid 2px; } .topFixBannerFixed { position: fixed; top: 0px; text-align:left; padding-left:20px; } </style> |
2. body에 적용할 div 생성
<div class="topFixBanner">내용</div> |
3. jquery 스크립트가 import 되어 있는지 확인
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> |
4. document가 ready 상태가 되면 스크립트 실행
var bannerOffset = $( '.topFixBanner' ).offset(); $( window ).scroll( function() { //window에 스크롤링이 발생하면 if ( $( document ).scrollTop() > bannerOffset.top ) { // 위치 및 사이즈를 파악하여 미리 정한 css class를 add 또는 remove 합니다. $( '.topFixBanner' ).addClass( 'topFixBannerFixed' ); } else { $( '.topFixBanner' ).removeClass( 'topFixBannerFixed' ); } }); |
'Develop > Javascript' 카테고리의 다른 글
도로명 주소찾기 작업 (귀찮은작업..) (4) | 2012.10.05 |
---|---|
window.print() 델리게이트함수 (프린트 전, 후) (0) | 2012.03.29 |
javascript 의 Remove Tag (0) | 2011.11.12 |
모바일웹 - 주소창 숨기기 (0) | 2011.11.02 |
Javascript parseInt(08)=0? parseInt(09)=0? (0) | 2011.10.21 |
jQuery를 이용한 이미지 갤러리 예제 (0) | 2011.10.04 |
Javascript UTF8 Encode Decode (0) | 2011.06.29 |
Ajax로 JSON 데이터를 받았을때 javascript 처리 방법 (0) | 2011.05.24 |