떠있는 광고 만들기/ 스크롤따라 움직이다가 하단부에서 고정되는 스크립트

안녕하세요 낭만고양이 입니다. 오늘은 스크롤을 내려도 항상 떠있는 레이어를 만드는 방법을 알려드릴려고합니다. 주로 광고 같은것을 좀더 많이 보이게 하기위해서 사용하는데요 얼마동안은 스크롤을 따라 내려오다가 안보이게 될때쯤부터 위치가 고정되는 그런 스크립트입니다. 사이트 다니다보면 이런 광고 많이 보셨을텐데요 국산광고에 주로 많이 사용합니다. 구글에드센스를 사용하시는분은 사용을 금합니다 에드센스 정책위반이거든요. 암튼 어떻게 이런게 가능한지 알아보도록 하겠습니다.

<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> 

ccs 스타일 설정은 위와같이 하시면됩니다. 티스토리 사용자분든은 html설정에서 ccs 텝으로 가셔서 위 소스를 붙여넣으세요.

<div class="topFixBanner">내용</div>

떠있는 광고를 넣을 실제적인 html 소스입니다. 광고내용은 여기에 넣으시면 됩니다. 

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var bannerOffset = $( '.topFixBanner' ).offset();
    $( window ).scroll( function() {  //window에 스크롤링이 발생하면
          if ( $( document ).scrollTop() > bannerOffset.top ) {  
            $( '.topFixBanner' ).addClass( 'topFixBannerFixed' );
          }
          else {
            $( '.topFixBanner' ).removeClass( 'topFixBannerFixed' );
          }
     });
</script> 

이 스크립트의 핵심입니다.  body 에 넣어놓으세요 

마우스 스크롤이 발생하고 원하는 위치까지 오면 스크립트를 실행합니다.

 

♥요점 정리♥

→ 마우스로 스크롤할때 광고가 일정부분까지는 스크롤따라 움직이다가 하단부에서 위치가 고정되는 스크립트

→ 광고를 보다 효과적으로 보이게함으로 클릭률을 높여준다.

→ 구글에드센스는 정책위반에 걸리므로 사용불가하다

추천 포스트

통역어플 파파고 해외여행 필수앱

무료티비어플 / 오늘의티비 모바일

최저가 주유소 찾기 어플/주유소가격비교앱