상단 고정 레이어 - div 스크롤 내려도 윗쪽에 고정

안녕하세요.. 상단 고정 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' );           }      });