Navbar 상단고정문제, 페이지스크롤응용

[박현우]

안녕하세요
Navbar밑에 진척도알려주는 UI를 할려고하는데 둘다 fixed를 하면 겹쳐져서 보이지않습니다 해결방법이 있을까요? 
부트스트랩때문인거같긴합니다..
//html
<nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
      <span class="navbar-brand" class="text">Navbar</span>
      <span class="ms-auto mx-3 badge bg-dark">Dark 🔄</span>
      <button class="navbar-toggler" type="button">
        <span class="navbar-toggler-icon"></span>
      </button>
      
    </div>
  </nav>
  
  <div id="widthbar"></div>

//css
#widthbar{
  
  background-color: blue;
  z-index: 10;
  height: 50px;
  position: fixed;
}
.navbar{
  position: fixed;
  
  width: 100%;
  z-index: 5;
}

그리고 응용문제에 대해 시도를해봤는데

$(window).on('scroll',function(){
      let 스크롤양 = document.querySelector('html').scrollTop;
      let 실제높이 = document.querySelector('html').scrollHeight;
      let 높이 = document.querySelector('html').clientHeight;
      
      
      //내리는양이 증가할수록
      if(스크롤양 == 0){
        $('#widthbar').css('width','1%');
      }
      else if(스크롤양 == 400){
        $('#widthbar').css('width','50%');
      }
      
      else if(스크롤양 == 1200){
        $('#widthbar').css('width','100%');
      }
    });
약간 엉성하게 돼서요 어떤문제가있을까요??

[codingapple]

 <div id="widthbar">를 navbar 안으로 넣어봅시다 
스크롤양이라는 변수가 0일때는 1
1200일 때는 100이 되는 미지수y를 계산해서 %왼쪽에 넣읍시다

[글쓴이]

글