어제 새벽에 CSS의 position 속성을 공부하면서 새롭게 알게 된 sticky를 블로그에 적용시켜봤습니다.
너무나도 간단해서 허무할 수준..이지만, 헤더를 고정시키면서 프로그레스바와 겹치는 상황이 발생했습니다.
그래서! 주변에 조언을 구해서 프로그레스바를 하단으로 내렸습니다 ㅎㅎ
기존에 사용하던 cdn으로는 커스터마이징이 힘들어서, 로직을 아예 바꿔버렸습니다 ㅠ
바로 보러가시죠 :)
목차
0. 블로그 상단 헤더 고정
위에서 설명한대로 헤더영역의 position을 sticky로 바꿔주면 끝입니다.
다만 주의해야 할 것은 sticky속성이 모든 브라우저에서 사용되는 것은 아니기 때문에, 별도의 polyfill 과정이 필요할 수 있다는 점을 생각하셔야 합니다!
(IE와 사파리의 문제이지만, 해당 이슈에 관심이 있으신 분은 polyfill에 대해서 찾아보시면 도움이 되실겁니다 ㅎㅎ)
환경설정 > 스킨 편집 > html 편집 으로 들어갑니다.
html 편집 탭에 들어왔다면, 다른 것들을 건드리기 전에 먼저 개발자도구에서 ctrl+shift+C를 이용해서 검사할 페이지 요소를 찾습니다.
저는 헤더부분을 찾아야 하기 때문에 헤더에 마우스를 올려서 header_wrap라는 id값을 확인했습니다.
(앞에 #이 붙어있다면 id, .이 붙어있다면 class입니다.)
이제 CSS 탭에 들어가셔서 헤더를 감싸고 있는 부분을 찾습니다.
여기서 position을 sticky로 바꿔줍니다!
여기까지만 하고 적용하면 끝입니다! 완전 쉽죠!
당연히 모바일에서도 적용됩니다 :)
1. 프로그레스바 수정
근데.. 이렇게 잘 설정하고 보니 기존 상단 프로그레스바가 안보이는 상황이 발생했습니다.
사실 같은 색이라서 색만 바꿔주면 보이게 만들 수 있었으나, 그렇게만 하면 좀 심심하니까 이 프로그레스바의 위치를 하단으로 옮겨보겠습니다!
기존에 제 글을 보고 프로그레스바를 적용하셨다면, 로직이 아예 바뀌어버리니 조심하세요..!
(기존 프로그레스바 내용을 모두 제거하고 진행하시면 되겠습니다!)
[블로그 디자인 1.0.9] 프로그레스바 만들기
본문 글을 확인할 때, 지금 얼마나 읽었는 지 스크롤바를 통해 파악을 할 수 있는데요! 추가로 상단에 얼마나 읽었는 지를 나타내는 프로그레스바가 있으면 예쁘지 않을까라는 생각을 해서 추가
ssocoit.tistory.com
html 탭에 들어가서 body의 바로 아래에 프로그레스바라는 div 태그를 만들어줍니다.
<!-- 프로그레스바 -->
<div class="progress-bar"></div>
그리고 head의 안쪽에 CSS 적용을 위한 style태그를 넣습니다.
따로 CSS탭에 적어도 되지만, 저는 그렇게 하면 모바일에서는 잘 적용이 되는데 데스크탑 환경에서는 적용이 안되는 문제가 생기더라구요..? (CSS파일에서 변수를 제대로 불러오지 못하는 문제때문이라고 추측했습니다.)
그래서 저는 head의 맨 마지막에 스타일태그로 CSS를 넣어줬습니다.
<style>
.progress-bar {
background: linear-gradient(to right, #006400 var(--scroll), transparent 0);
background-repeat: no-repeat;
width: 100%;
position: fixed;
bottom: 0px;
left: 0;
height: 5px;
z-index: 9000;
}
</style>
마지막으로 body의 맨 끝에 스크립트를 넣어줍시다.
이 부분에는 현재 스크롤과 요소의 높이를 이용해서 스크롤이 얼마나 진행되었는 지를 계산해주는 로직이 담겨있습니다.
계산한 값을 scroll이라는 변수에 넣고, 이 값을 이용해서 style값을 변경시켜주는 방식입니다.
<!-- 프로그레스 바 스크립트 -->
<script>
const element = document.documentElement,
body = document.body,
scrollTop = 'scrollTop',
scrollHeight = 'scrollHeight',
progress = document.querySelector('.progress-bar');
document.addEventListener('scroll', function() {
scroll = (element[scrollTop] || body[scrollTop]) / ((element[scrollHeight] || body[scrollHeight]) - element.clientHeight) * 100;
progress.style.setProperty('--scroll', scroll + '%');
});
</script>
여기까지 완료하시고, 색을 변경하고 싶으시면 style 태그 내에서 background 내의 #006400을 원하는 색으로 바꿔주시면 됩니다.
만약 상단으로 위치를 옮기시고 싶다면 bottom을 top으로 바꾸시면 됩니다!
그리고 적절한 위치에 넣고 싶으시다면 필요에 따라 top이나 bottom의 값을 조절해주시면 되겠습니다 :)
여기까지 완료하시면?? 하단에 프로그레스바가 완성됩니다!!!
당연히 모바일에서도 잘 적용됩니다 :)
최근댓글