스크롤바를 최상단 고정하기

인디케이터(Indicator)? 인디케이터가 무엇이냐? 하면 사전으로는 이렇다. (일의 현황·사정 변화 등을 나타내는) 지표. 그렇다 지금 필자의 블로그에 적용된 상단에 스크롤을 하면 상단에 게이지가 쌓이며 어느정도 스크롤링이 됬는지 보여지는 것이다.(물론 메뉴에도 쓰이고 다양하게 쓰인다) 스크롤바가 있는데 이게 굳이 왜 필요하느냐? 그렇다 굳이는 필요 없다.

그러나 꾸미기에 관심이 있는 분들에게 혹(?)할만한 아이템이라고 생각해서 블로깅을 하는 것이다. 따지고 보면 꾸미기 상관없이 그냥 블로깅을 해도 된다. 이것은 자기만족이라고 할 수 있다. 좀 깊이 들어가면 UX나 UI적으로는 충분히 쓸만한 아이템이라 생각한다. 과하지만 않는다면 말이다.

최근 사이트들이 많이 사용중이기도(Daum, 로스트아크) 하고 아마 많은 분들이 뭔가 대단히 있어보이고 그리고 나도 적용해보고 싶지만 이걸 뭐라고 검색해야 할까 고민이 많으시는 분들이 있을 것 같아서 이렇게 블로깅을 시작하게 되었다.


이런 인디케이터를 자주 볼수 있게 되었다.

늘 말씀드리지만 간단(?)하지만 최적의 꾸밈이 느껴지는 그런 아이템을 소개하고 있다. 그러니 겁먹지 말고 천천히 필자를 따라오면 아주 쉽게 가능하다. 겁먹지 않는 것. 그것이 포인트다.

CSS 코드

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #fff;
}
.progress-container {
  width: 100%;
  height: 3px;
  background: #f6f6f6;
}
.progress-bar {
  height: 3px;
  background: #dbbbbb;
  width: 0%;
}

관리자 - 스킨편집 - HTML 편집 - CSS탭에 적당한 곳에 위의 코드를 붙여 넣도록 하자. 필자와 같이 진행하기 위해서(인디케이터가 TOP에 딱 붙어 있는 경우) 중요한건 progress-container, progress-bar 이 두 부분에 background 컬러를 설정해주면 된다. height는 인디케이터의 두께가 될 것이다.

HTML 코드

<div class="header">  
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div> 
</div>
<script>
// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

이번엔 HTML탭에 BODY 바로 밑에 위의 코드를 붙여 넣어주면 끝. 사실상 CSS 탭에서 Background Color를 설정해주기만 하면 된다. 예쁜 인디케이터 만드시길 바라며! 그리고 궁금하신점이 있으시면 댓글 남겨주시면 답변해드리도록 하겠다.
출처 : W3Schools.com

댓글을 달아 주세요

  1. 훈ss

    꽁기님 항상 글 잘보고 있습니다. 덕분에 티스토리 꾸미는데 도움이 많이 되었답니다!

    다름이 아니고 꽁기님 블로그 보다보면 아래에서 광고창 하나가 올라오는경우가 있던데 이건 어떻게 하는지 알려주실 수 있으신가요?

    화살표로 광고 내리고 올리고 하는거욤~!

    • 꽁기웹디
      2018.11.03 10:25 신고

      잘 봐주셔서 감사합니다.^^ 아 그 광고는 모바일로 보셨을때 말씀하시는거죠? 제가 정확하게는 모르겠지만 구글 광고, 즉 구글 애드센스에서 광고 - 자동광고 - "AMP 자동광고"를 설정해두면 모바일에서 그렇게 나오는 것 같습니다.^-^ 특별하게 제가 별도로 스크립트 작업을 하거나 하지 않았습니다!

  2. 훈ss

    감사합니다~! 덕분에 되었습니다^^

    앞으로도 좋은글 부탁드릴게요!

  3. 비밀댓글입니다

  4. 비밀댓글입니다

  5. 일상의 행복을 느끼고 싶다

    ㅠㅠ 왜 안될까요
    시키는대로 했는데

    • 꽁기웹디
      2020.09.28 16:21 신고

      CSS부분 다시 한번 꼭 확인해보시구요!
      HTML부분 역시 BODY쪽에 잘 붙여 넣어보세요! 잘 안되는 부분은 코드 부분이 잘못 넣었을때 안될 경우가 있습니다!

    • 일상의 행복을 느끼고 싶다
      2020.09.30 21:44 신고

      오 꽁냥꽁냥 만지다 보니까 됬어요 정말 감사합니다 !! 알고보니 CSS Top 부분 수치를 조절하니까 나오네요 정말 감사합니다 ㅠ.ㅠ