vanilla js를 이용하여 bottom sticky button 만들기

이번 포스팅에서는 Vanilla js를 활용하여 하단 Sticky Button을 만들어보겠다.

목표: 스크롤을 특정 구간 이상으로 내릴 때 Sticky버튼이 보이고, 올릴 때 사라지도록 만들기

1. 새로운 엘리먼트 동적으로 추가해보기

<script>
  var sticky_container = document.createElement("div");
  var sticky_text = document.createElement("p");
  sticky_text.innerText = "BUTTON_TEXT";
  sticky_container.classList.add('sticky_container');
  sticky_container.classList.add('not_show');
  sticky_text.classList.add('sticky_text');
  sticky_container.appendChild(sticky_text);
  document.getElementById("root").appendChild(sticky_container);
</script>

html에 미리 코드를 만들어 놓고 실행할 수도 있지만, javascript를 이용해서 추가하는 경우를 만들어 보았다.
sticky버튼을 감싸고 있는 컨테이너로 div를 만들었고, 텍스트를 위한 p 태그를 만들었다.
이후 sticky_container에 스타일을 지정해주기 위해 sticky_container라는 class이름을 주었다.
not_show라는 것은 뒤에 나오겠지만, sticky 버튼을 숨겼다가 보여지게 하기 위함이다.

2. 버튼에 스크롤 이벤트 달기

<script>
  var containerClassList = sticky_container.classList;
    window.addEventListener('scroll', () => {
      let scrollLocation = document.documentElement.scrollTop;
      let windowHeight = window.innerHeight;
      let triggerHeight = document.body.scrollHeight / 6; //전체 세로 길이의 6분의 1위치

      if(scrollLocation + windowHeight >= triggerHeight){
        if(containerClassList.contains('not_show')){
          containerClassList.remove('not_show');
          console.log('show');
        }
      }else{
         if(!containerClassList.contains('not_show')){
          containerClassList.add('not_show');
          console.log('not show');
        }
      }
    })
</script>

사용자가 scroll할 때마다 위 코드가 실행된다.
현재 스크롤 위치를 얻어와 전체 height의 특정 지점을 기준으로 이벤트를 다르게 처리했다.
classList에서 not_show의 존재 여부를 판별하여 버튼이 보이게 / 사라지게 할 것인지를 정했다.

3. 버튼 스타일 지정

<style>
  .not_show{
    display: none !important;
  }
  .sticky_container{
    z-index: 9999;
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 64px;
    background: #8B3912;
    display: flex;
    align-items: center;
    vertical-align: middle;
  }
  .sticky_text{
    background: #8B3912;
    color: #ffffff;
    width: 100%;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: bold;
    font-size: 22px;
    text-align: center;
    vertical-align: middle;
  }
</style>

위는 CSS 코드이다.
not_show라는 클래스는 display: none 속성을 갖고 있음을 확인할 수 있다.
또한 sticky_container는 z-index 속성의 값을 높게 설정하여 가장 앞에 올 수 있도록 설정해주었다.

전체 코드

<script>
  function addStickyButton(){
    var sticky_container = document.createElement("div");
    var sticky_text = document.createElement("p");
    sticky_text.innerText = "BUTTON_TEXT";
    sticky_container.classList.add('sticky_container');
    sticky_container.classList.add('not_show');
    sticky_text.classList.add('sticky_text');
    sticky_container.appendChild(sticky_text);
    document.getElementById("root").appendChild(sticky_container);

    var containerClassList = sticky_container.classList;
    window.addEventListener('scroll', () => {
      let scrollLocation = document.documentElement.scrollTop;
      let windowHeight = window.innerHeight;
      let triggerHeight = document.body.scrollHeight / 6; //전체 세로 길이의 6분의 1위치

      if(scrollLocation + windowHeight >= triggerHeight){
        if(containerClassList.contains('not_show')){
          containerClassList.remove('not_show');
          console.log('show');
        }
      }else{
         if(!containerClassList.contains('not_show')){
          containerClassList.add('not_show');
          console.log('not show');
        }
      }
    })
  }
</script>

<style>
  .not_show{
    display: none !important;
  }
  .sticky_container{
    z-index: 9999;
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 64px;
    background: #8B3912;
    display: flex;
    align-items: center;
    vertical-align: middle;
  }
  .sticky_text{
    background: #8B3912;
    color: #ffffff;
    width: 100%;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: bold;
    font-size: 22px;
    text-align: center;
    vertical-align: middle;
  }
</style>