Reading bar progress is not on position

hello, i using reading bar progress (redline) from this website is working fine on my generate press theme, but its not on position on mobile view, btw i hooked using elements features see this screenshoot
and this

JAVASCRIPT

<div class="progress-container">
    <div class="progress-bar" id="myProgressBar"></div>
</div>

<script>
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("myProgressBar").style.width = scrolled + "%";
}
</script>

CSS

/*** Progress bar **/
.progress-container {
width: 100%;
height: 8px;
background: #ccc; /** Change Progress bar background color **/
}

.progress-bar {
height: 8px;
background: #a70404; /** Change Progress bar color **/
width: 0%;
position:fixed;
z-index:999;
}

• This topic was modified 2 years, 11 months ago by fakhrurpedia.
• This topic was modified 2 years, 11 months ago by fakhrurpedia.
• This topic was modified 2 years, 11 months ago by fakhrurpedia.

The page I need help with: [log in to see the link]