let calcScrollValue = () => {
  let scrollProgress = document.getElementById("scroll-p");
  let progressValue = document.getElementById("scroll-value");
  let topprogress = document.getElementById("myBar");
  var header = document.getElementById("myHeader");
  let pos = document.documentElement.scrollTop;
  let calcHeight =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;
  let scrollValue = Math.round((pos * 100) / calcHeight);
  if (pos > 100) {
    scrollProgress.style.display = "grid";
    header.classList.add("sticky");
    topprogress.style.display="block";
  } else {
    scrollProgress.style.display = "none";
    header.classList.remove("sticky");
    topprogress.style.display="none";
  }
  scrollProgress.addEventListener("click", () => {
    document.documentElement.scrollTop = 0;
  });
  scrollProgress.style.background = `conic-gradient(var(--clr-theme-color) ${scrollValue}%, #d7d7d7 ${scrollValue}%)`;
  topprogress.style.width = scrollValue + "%";
};
window.onscroll = calcScrollValue;
window.onload = calcScrollValue;