jquery를 javascript로 바꿔보자 - fixed 활용한 플로팅 배너

앞서 포스팅한 "jquery를 javascript로 바꿔보자 - 퀵스크롤(플로팅 배너) 기능" 과는 조금 다른 듯한 플로팅 배너 코드를 적어볼게요.

 

<div style="position:relative; margin:0 auto; width:340px; height:1200px; border:1px solid #ccc; background:url('이미지경로') no-repeat; background-size:cover">
    <div id="scroll_btn" style="position:absolute; top:120px; right:10px; width:100px; height:200px; overflow:hidden; z-index:100; background:#fff; border:1px solid #ccc;">
      <a href="#" style="position:absolute; top:0; width:100px; height:200px; background:#fff; border:1px solid #ccc">고정배너</a>
    </div>
</div>

 

 

위 코드대로 하면 이렇게 떠있는 배너가 생성됩니다.

여기에 아래 jquery 코드를 이용해 따라다니는 플로팅 배너로 만들 수 있습니다.

 

<!-- 이 코드 위에 jquery js 를 불러와야 됩니다. -->
<script>
$(window).scroll(function(){
  if ($(this).scrollTop() > 100) { // 스크롤 위치가 100 넘어가면
    $('#scroll_btn a').css('position','fixed'); // scroll_btn > a 를 fixed 로 변경
  } else {
    $('#scroll_btn a').css('position','absolute');
  }
});
</script>

 

이렇게 코드를 적용한 다음 스크롤을 내리면 배너가 fixed 로 변경되면서 화면 안쪽에 고정되어 따라다니게 됩니다.

여기서 핵심은 scroll_btn 에 position fixed 를 주는 것이 아니라 scroll_btn 안에 있는 a 태그에 스타일(css)을 적용시켜 줘야 된다는 점입니다.

 

만약에 scroll_btn 에 해당 css 를 주면 아래처럼 화면 밖으로 나가버리게 됩니다.

 

위 css 부분을 잘 살펴보시기 바랍니다.

 

그리고 jquery 코드를 아래처럼 javascript 로 바꿔봤습니다.

<script>
window.addEventListener('scroll', function() { // 스크롤 이벤트가 생기면
  const wsy = window.scrollY; // 화면 수직 위치를 구하고
  const scroll_btn = document.getElementById('scroll_btn').querySelector('a');
  
  if (wsy > 100) { // 그 위치가 100을 넘기면
    scroll_btn.style.position = 'fixed'; // 해당 엘리먼트 position 속성을 fixed 로 변경
  } else {
    scroll_btn.style.position = 'absolute';
  }
});
</script>

 

주석 참고해 보시기 바랍니다.