<div>Здесь счётчика нет!</div>
<div>Здесь счётчика нет!</div>
<div>Здесь счётчика нет!</div>
<div>Здесь счётчика нет!</div>
<div>Здесь счётчика нет!</div>
<div>Счётчик: <span id="counter">0</span></div>
<div>Здесь счётчика нет!</div>
<div>Здесь счётчика нет!</div>
<div>Здесь счётчика нет!</div>
<div>Здесь счётчика нет!</div>
<div>Здесь счётчика нет!</div>

div {
  height: 25vh;
  text-align: center;
}

const makeTimer = (selector) => {
  let timer = 0;
  let interval = null;
  let field = document.querySelector(selector);
  const timerTick = () => {
    timer += 1;
    field.innerText = timer;
  };
  const reset = () => {
    timer = 0;
  }
  const start = () => {
    interval = setInterval(timerTick, 1000);
  }
  const stop = () => {
    if (interval !== null) {
      clearInterval(interval);
      interval = null;
    }
  }
  return {reset, start, stop}
};

const options = {
  rootMargin: '0px',
  threshold: 0.5,
};
const timer = makeTimer('#counter');
const observer = new IntersectionObserver(
  (e, o) => {
    if (e[0].isIntersecting) {
      timer.start();
    } else {
      timer.stop();
    }
  },
  options,
);
const target = document.querySelector('#counter');
observer.observe(target);