HTML
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<span class="badge bg-dark">Dark 🔄</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="page">
<div class="progress"></div>
</div>
</nav>
<hr />
JAVASCRIPT
/*전체 페이지 progress-bar 만들귀*/
/*
1.progress bar 고정하기
2.전체 scroll가능양(scrollTop 또는 scrollY) 높이 구하기 <- 전체 길이를 백분율로 나타내기 위함.
2-1 100분율로 나타내는 방법은?
=> 일부값 / 전체값 * 100
따라서 html의 스크롤하는 양(scrollTop또는 scrollY(window로할꺼면)) / (웹페이지 실제높이(scrollHeight) - 유저에게 보여지는 웹페이지 높이(clientHeight)) * 100
*/
<hr />
이 로직이 맞나염?
window.addEventListener("scroll",()=> {
const wind = document.querySelector("html")
let nav = document.querySelector(".navbar");
let navHeight = nav.clientHeight;
let progress = document.querySelector(".progress");
console.log(wind.scrollTop / (wind.scrollHeight - wind.clientHeight) * 100)
progress.style.width = `${wind.scrollTop / (wind.scrollHeight - wind.clientHeight) * 100}%`
if(wind.scrollTop>navHeight) {
nav.classList.add("fixed");
} else {
nav.classList.remove("fixed")
}
})
이렇게 하니까 잘 되긴 합니다 .
혹시 맞게 했다면 gif로 개굴사진 아쉬운게 있다면 피드백과 조언 부탁드려요
