This is my first post here, sorry if I make rookie mistakes... I started web development 6months ago and I haven't learn JavaScript yet, although I need to use it for a personal project. I want to make a scale model of solar system, like this https://joshworth.com/dev/pixelspace/pixelspace_solarsystem.html (I didn't know this website existed when I got the idea but now I'm inspired by it).
So what I want to do is the km counter for the length of #divB, I've found a beginning of code (thank you @Przemek for this https://stackoverflow.com/a/35923228), that I tried to arrange with my own research, this is just an example of the idea (I don't want you guys to do all the job for me !):

My problem is that I can't find a way to make the counter starts at #divB and stops when the div ends.
My second problem is I don't know how to make the script works (might be stupid request but I tried the original @Przemek's code (that perfectly works on JSFiddle) between element in the html file, or with an external source linked to a js file but it's not working for me)

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 -->

JSFiddle here