따라다니는 배너

익스플로러, 크롬에서 확인하였습니다. 

 

HTML

<div>
  배너<br>배너<br>배너<br>배너<br>배너<br>
  배너<br>배너<br>배너<br>배너<br>배너<br>
  배너<br>배너<br>배너<br>배너<br>배너<br>
  배너<br>배너<br>배너<br>배너<br>배너<br>
  배너<br>배너<br>배너<br>배너<br>배너<br>
  배너<br>배너<br>배너<br>배너<br>배너<br>
  배너<br>배너<br>배너<br>배너<br>배너<br>
  배너<br>배너<br>배너<br>배너<br>배너<br>
  배너<br>배너<br>배너<br>배너<br>배너<br>
  배너<br>배너<br>배너<br>배너<br>배너<br>
</div>
<div id="quick-banner"> 
  <img src="images/right_banner.jpg" width="170" height="300" /> 
</div>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

 

CSS

#quick-banner {  
  position:absolute;
  height:300px;   /* 퀵메뉴, 배너 이미지의 높이 */
  width:170px;    /* 퀵메뉴, 배너 이미지의 너비*/
  margin:0px 0px 0px 500px;   /* 가장 오른쪽의 수치가 화면 가운데에서 얼마만큼 오른쪽으로 레이어를 붙일 것인지 설정  */ 
  top: 110px;  /* 배너 상단에서 얼마나 떨어뜨릴지 설정*/
  left: 50%;     /* 레이어의 시작점이 왼쪽으로 부터 50% 지정 */
  text-align: left;
  padding: 0px;
}

 

JS

$(function() {
  var offset = $("#quick-banner").offset();
  var topPadding = 15;
  $(window).scroll(function() {
    if ($(window).scrollTop() > offset.top) {
      $("#quick-banner").stop().animate({
        marginTop: $(window).scrollTop() - offset.top + topPadding
      }, 500);
    } else {
      $("#quick-banner").stop().animate({
        marginTop: 0
      });
    };
  });
});

 

 

코드확인

https://codepen.io/csvhixfk-the-scripter/pen/YzRxqQE