[Javascript] 스크롤에 따라 채워지는 bar

보통 홈페이지에 연혁을 보여주는 페이지를 가면 보이는 progressbar를 만들어보았다.

 

HTML

  <div class="section">

    <div class="title-box">

      <h1>안녕하세요<br>요건 고정된 타이틀임다.</h1>

    </div>

    <div class="progress-box">

      <div class="progress-bar"></div>

    </div>

    <div class="content-box">

      <p>채워집니다~ 이것 좀 보세요오 신기하죠? 곧 끝나갑니다!

      </p>

    </div>

  </div>

 

CSS

.section {

  width: 100%;

  position: relative;

  display: flex;

  justify-content: center;

  margin: 300px 0;

}

.title-box {

  position: sticky;

  top: 100px;

  left: 200px;

  width: 500px;

  height: 100%;

}

.progress-box {

  width: 5px;

  height: 3000px;

  position: relative;

  background-color: #999;

}

.progress-bar {

  width: 100%;

  height: 0%;

  background-color: chocolate;

}

.content-box {

  position: relative;

  width: 600px;

  margin-left: 50px;

}

.content-box p {

  font-size: 30px;

  writing-mode: vertical-lr;

  letter-spacing: 50px;

}

title부분은 position:sticky를 이용해 고정시켜주고, content 부분에 writing-mode: vertical-lr(글자를 세로로 보여줌), letter-spacing(자간 조정)을 통해 세로로 좀 띄워서 보여주었다.

 

JAVASCRIPT

let total = document.querySelector('.progress-box').clientHeight - 353;

window.addEventListener('scroll',()=>{

  let progress = window.scrollY / total * 100

  document.querySelector('.progress-bar').style.height = `${progress}%`

});

우선 변수부분에 progress-box의 height값을 분모로 쓰기위해 담아두었는데 353을 뺀 이유는 window.scrollY를 검사해보았을 때 전체 값보다 353만큼 작게 나오길래 뺐는데 왜 353이 차이가 나는지 이유를 알지 못했다. 반응형으로 작업한다면 height값이 달라질 때마다 저 뒤에 숫자만 고치면 되겠지만.. 원하는 바는 아니다.

progress는 window.scrollY값에 따라 0~100%로 되게 계산하고 progress-bar의 height값을 %로 구해주었다.

확장성있는 코드는 참.. 어려운거같다.