jquery를 javascript로 바꿔보자 - 퀵스크롤(플로팅 배너) 기능

홈페이지를 방문하다 보면 왼쪽이나 오른쪽에 따라다니는 배너 등을 볼 수 있습니다.

예전에는 제이쿼리(jquery)로 많이 구현했는데 이번에 한번 순수 자바스크립트로 바꿔 보겠습니다.

 

<style type="text/css">
#quickmenu_sub{position:absolute; right:-70px; top:10px; width:67px; height:120px; z-index:1}
#quickmenu_sub a img{vertical-align:middle;}
</style>

<div style="width:500px; height:1800px; margin:0 auto; position:relative; border:1px solid #ccc">
  <div id="quickmenu_sub"> 
	<a href="#">Top</a>
	<a href="#">Home</a>
	<a href="#">Login</a>
	<a href="#">Join</a>
  </div>
</div>

html, css는 컴퓨터에 모아둔 코드 조금 수정해서 적었습니다.

 

<script>
$(document).ready(function(){ 
  var current_position = parseInt($("#quickmenu_sub").css("top")); 
  $(window).scroll(function() {
  var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
    $("#quickmenu_sub").stop().animate({"top":position+current_position+"px"},1000);
  });
});
</script>

이 부분이 jquery 스크롤 플로팅 배너 코드입니다.

 

 

이렇게 화면에서 스크롤을 움직이면 저 오른쪽에 있는 메뉴들이 따라다니는 기능입니다.

 

이 코드를 순수 자바스크립트로 바꿔보겠습니다.

<srcipt>
const quick_scroll = (function() {
  const quickmenu_sub = document.getElementById('quickmenu_sub');
  const current_position = quickmenu_sub.style.top;

  window.addEventListener('scroll', function() {
    const position = window.scrollY;
    quickmenu_sub.style.top = `${position + current_position}px`;
  });
});

quick_scroll();

</script>

하다 보니 함수화 했는데 그냥 안에 있는 코드로 해도 됩니다.

그리고 stop animation 효과는 적용하지 않았습니다.

 

오래전 쓰던 코드를 자바스크립트로 바꿔보긴 했지만, 요즘은 굳이 저렇게 안 해도 됩니다.

그냥 position fixed로 구현하면 됩니다.

 

예전에는 IE6, 7, 8 등 css style이 적용 안 되는 브라우저들 때문에 저렇게 jquery를 사용해서 구현했지만 요즘은 웹브라우저에서 대부분의 css를 지원하기 때문에 한결 편해졌답니다.

 

예전에는 이런 코드로 구현하는 방법이 있었네? 정도로 생각해 주세요.

 

감사합니다.