인터넷/티스토리 꾸미기
스크롤 인디케이터 만들기
- -
스크롤바를 최상단 고정하기
인디케이터(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는 인디케이터의 두께가 될 것이다.
<body>바로 아래 HTML 코드
<div class="header">
<h2 data-ke-size="size26">Scroll Indicator</h2>
<div class="progress-container">
<div id="myBar" class="progress-bar"> </div>
</div>
</div>body 바로 아래 인디케이터가 될 코드입니다! 확인 후 잘 넣어주세요!
</body> 바로 위에 Script 코드
<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
Contents
소중한 공감 감사합니다😘