2015. 8. 4. 14:15 IT/javascript
플로팅 배너 넣기 / 따라다니는 배너 / 제이쿼리 플러그인
padudu.com 좌측 우측 상단 보면 따라다니는 배너들이 보일겁니다.
이걸 프로팅 배너라고하는데요.
넣는 방법을 알려드리겠습니다.
우선 소스!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!--jquery 프레임워크 이미 있다면 안 넣으셔도 됩니다--> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <!--jquery--> <script> $(function() { /*-----------------------------------------------------------------------------+ | 플러그인 방식 +------------------------------------------------------------------------------+ | auther : insung | site : padudu.com +-----------------------------------------------------------------------------*/ $.fn.verticalFixed = function() { var container = this; if(container.length == 0) { return false; } var targetArr = []; for(var loop = 0; container.length > loop; loop++) { targetArr[loop] = { 'obj':$(container[loop]) ,'position':$(container[loop]).position() ,'offset':$(container[loop]).offset() }; // console.log(targetArr[loop]); } $(window).scroll( function() { for(var loop = 0; targetArr.length > loop; loop++) { var target = targetArr[loop]; if(target.obj.css('position') == 'static' && target.offset.top <= $(document).scrollTop()) { target.offset = target.obj.offset(); target.obj.css({ 'position':'fixed' ,'top':5 }); } else if(target.obj.css('position') == 'fixed' && target.offset.top > $(document).scrollTop()) { target.obj.css({ 'position':'static' }); target.offset = target.obj.offset(); } } }); }; $('*[verticalFixedYN]').verticalFixed(); }); </script> | cs |
위 스크립트를 html파일의 head 태그 안쪽에 넣습니다.
그리고는 따라다니게 만들 태그 에다가 verticalFixedYN="Y" 라고 넣으면 끝.
예)
<div verticalFixedYN="Y">배너 이미지</div>
'IT > javascript' 카테고리의 다른 글
티스토리 모바일 구글 애널리틱스 넣기 (노가다) (2) | 2015.08.05 |
---|---|
자바스크립트 새로고침. (0) | 2015.08.03 |