제이쿼리 스크롤 배너 다는 법 예제 [jQuery Sticky Plugin]

오늘은 제이쿼리 스크립트중 하나인 스크롤 배너를 달아봅니다

자바스크립터가 어떻게 구현되는지도 모르는 초짜인데

어렵지 않게 적용했습니다

그럼 시작 해볼게요

jQuery Sticky Plugin

데모

본 사이트에서는 오른쪽 사이드에 애드센스에 적용해놨습니다

그래서 본문을 읽으면서 내려오면 자연스럽게 따라 내려오면서 해당 배너의 시선을 잡습니다

파일을 받으셨다면 티스토리의 html/css로 들어갑니다

html 편집기로 들어가서

</body> 위에 아래 코드를 붙여 넣기합니다

<!-- 제이쿼리 사이드 -------------------------------------------------------------------------------->

<script src="//code.jquery.com/jquery.min.js"></script>

<script src="./images/jquery.sticky.min.js"></script>

<script type="text/javascript">

$(function(){ // document ready 

 $('.sticky').sticky( {topSpacing: 20,bottomSpacing:$("#footer").outerHeight(true)} );

});

</script>

<script type="text/javascript">

  var _gaq = _gaq || [];

  _gaq.push(['_setAccount', 'UA-36251023-1']);

  _gaq.push(['_setDomainName', 'jqueryscript.net']);

  _gaq.push(['_trackPageview']);

  (function() {

    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

  })();

</script>

<!-- 제이쿼리 사이드 -------------------------------------------------------------------------------->

</body>

붙여 넣기 하셨다면

스크롤 배너 적용 할곳에다가 아래 div 박스를 넣어줍니다

보통 사이드바에다가 달아놓아야 좋겠죠?

사이드바가 아닌 본문에는 안맞을테니까요

<s_sidebar_element>

<center>

<div class="hidden-xs hidden-sm">

<div class="widget sticky">

<!-- 애드센스 -->

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- 300 600 -->

<ins class="adsbygoogle"

     style="display:inline-block;width:300px;height:600px"

     data-ad-client="ca-pub-9134653606147405"

     data-ad-slot="6197298778"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</div></div>

</center>

</s_sidebar_element>

티스토리 html편집에서 사이드바 항목으로 갑니다

거기서 자신이 필요로하는 스크롤 배너에 div박스를 넣어줍니다

<div class="widget sticky">

광고

</div>

적용 하셨다면 다음은 제이쿼리 플러그인 업로드입니다

아래 파일2개를 받으시고

jquery.sticky.js

jquery.sticky.min.js

티스토리 html/css 편집에서 위 파일을 업로드합니다

스킨저장을 하시고 확인을 해봅니다

플러그인이 정상 작동하시나요? 잘하셨습니다^^

저도 이런거에 완전 초짜라서 하나 하나 배워가면서 알아가는건 공유하도록 하겠습니다

ㄳ합니다.