Saya ingin mengira kedudukan tatal elemen dalam tetingkap sebagai peratusan.

• 0% ialah di mana bahagian atas elemen berada di bahagian bawah tetingkap (belum ditunjukkan lagi)
• 100% ialah kedudukan di mana bahagian bawah elemen berada di bahagian atas tetingkap (semua elemen dipaparkan)

Saya dekat, tetapi saya tahu saya berfikir sesuatu yang salah dalam matematik. Saya membuat demo kecil untuk menunjukkan peratusan tatal untuk berbilang elemen, tetapi peratusan semuanya salah.

function getElemScrollPercent(selector){
  const scale = 0.1;
  const el = document.querySelector(selector);
  const out = el.querySelector('.out');
  
  function calc(){
    const rect = el.getBoundingClientRect();

    //don't bother calculating if it's off screen
    if (rect.top < window.innerHeight && rect.bottom > 0) {
      const total = (window.scrollY) / (rect.bottom + rect.height);
      const pct = total * 100;

      out.innerHTML = `${Math.round(pct)}%`;
    }
  }
  
  window.addEventListener('scroll', calc);
  calc();
}

getElemScrollPercent('#one');
getElemScrollPercent('#two');
getElemScrollPercent('#three');

* { box-sizing: border-box; }
body { display: flex; flex-direction: column; min-height: 400vh }
section {
  height: 100vh;
  position: relative;
  border: 1px solid black;
}
#one   { background:#d1b4b4; }
#two   { background:#b4d1bc; }
#three { background:#b4b5d1; }
.out {
  position: sticky;
  top: 0;
  display: inline-block;
  padding: .5rem;
  background: #CCC;
}

<section id="one">   <span class='out'>%</span> </section>
<section id="two">   <span class='out'>%</span> </section>
<section id="three"> <span class='out'>%</span> </section>