앞서 포스팅한 "jquery를 javascript로 바꿔보자 - 퀵스크롤(플로팅 배너) 기능" 과는 조금 다른 듯한 플로팅 배너 코드를 적어볼게요. 고정배너 위 코드대로 하면 이렇게 떠있는 배너가 생성됩니다. 여기에 아래 jquery 코드를 이용해 따라다니는 플로팅 배너로 만들 수 있습니다. 이렇게 코드를 적용한 다음 스크롤을 내리면 배너가 fixed 로 변경되면서 화면 안쪽에 고정되어 따라다니게 됩니다. 여기서 핵심은 scroll_btn 에 position fixed 를 주는 것이 아니라 scroll_btn 안에 있는 a 태그에 스타일(css)을 적용시켜 줘야 된다는 점입니다. 만약에 scroll_btn 에 해당 css 를 주면 아래처럼 화면 밖으로 나가버리게 됩니다. 위 css 부분을 잘 살펴보시기 ..

홈페이지를 방문하다 보면 왼쪽이나 오른쪽에 따라다니는 배너 등을 볼 수 있습니다. 예전에는 제이쿼리(jquery)로 많이 구현했는데 이번에 한번 순수 자바스크립트로 바꿔 보겠습니다. Top Home Login Join html, css는 컴퓨터에 모아둔 코드 조금 수정해서 적었습니다. 이 부분이 jquery 스크롤 플로팅 배너 코드입니다. 이렇게 화면에서 스크롤을 움직이면 저 오른쪽에 있는 메뉴들이 따라다니는 기능입니다. 이 코드를 순수 자바스크립트로 바꿔보겠습니다. const quick_scroll = (function() { const quickmenu_sub = document.getElementById('quickmenu_sub'); const current_position = quickmenu_..