Esta es mi primera publicación aquí, lo siento si cometo errores de novato... Empecé el desarrollo web hace 6 meses y aún no he aprendido JavaScript, aunque necesito usarlo para un proyecto personal. Quiero hacer un modelo a escala del sistema solar, como este https://joshworth.com/dev/pixelspace/pixelspace_solarsystem.html (No sabía que este sitio web existía cuando tuve la idea, pero ahora estoy inspirado por él) ).
Entonces, lo que quiero hacer es el contador de km para la longitud de #divB, encontré un comienzo de código (gracias @Przemek por esto https://stackoverflow.com/a/35923228 ), que traté de arreglar con mi propia investigación, este es solo un ejemplo de la idea (¡no quiero que ustedes hagan todo el trabajo por mí!):
Mi problema es que no puedo encontrar una manera de hacer que el contador comience en #divB y se detenga cuando finalice el div.
Mi segundo problema es que no sé cómo hacer que funcione el script (puede ser una solicitud estúpida, pero probé el código original de @Przemek (que funciona perfectamente en JSFiddle) entre elementos en el archivo html, o con una fuente externa vinculada a un js archivo pero no me funciona)
var counter = document.getElementById('count'); function updateCounter() { 'use strict'; var clientHeight = document.getElementById('divB').clientHeight - window.innerHeight; counter.textContent = Math.round(document.documentElement.scrollTop * 3.4735); } //multiplied by 3.4735 for the km scale document.addEventListener('scroll', updateCounter); window.addEventListener('resize', updateCounter); #divA { height: 1000px; width: 100% } #divB { height: 1296000px; width: 100% } #divC { height: 1000px; width: 100% } #count { position: fixed; } <span id="count">0</span> <div id="divA"></div> <!-- intro --> <div id="divB"></div> <!-- planets scale --> <div id="divC"></div> <!-- footer -->