Edit in JSFiddle

const statusBox = document.querySelector('.status');
const intersectItem = document.querySelectorAll('.item');
const options = {
  threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
}

let callback = (entries, observer) =>{ 
  entries.forEach(entry => {
  if (entry.isIntersecting) {
      let showTime = ((entry.time % 60000) / 1000).toFixed(0)+ ' sek.';
      let rect = entry.boundingClientRect;
      let ratio = entry.intersectionRatio;
      let percent = (ratio*100).toFixed(0);
      let name = entry.target.textContent;

      entry.target.style.opacity = ratio * 0.6 ;

      let statusText = name + ' er ' + percent + '% synlig';
      statusText += '<p><span class="subtext">';
      statusText += 'Bottom: ' + rect.bottom.toFixed(0) + '<br>';
      statusText += 'Top: ' + rect.top.toFixed(0) +'<br>';
      statusText += 'Tid siden pageload: ' + showTime + '<br>';
      statusText += 'Intersection Ratio: ' + ratio.toFixed(4) + ' </span>';
      statusBox.innerHTML = statusText;
      statusBox.style.background = '#459845';
    } 
    else {
      statusBox.innerHTML = 'Ingen billeder synlige, scroll!';
      statusBox.style.background = '#cc4848';

    }
  });
};

const observer = new IntersectionObserver(callback,options);
intersectItem.forEach(item => {
	observer.observe(item)
});
<div class="container">
	<div class="status">Ingen billeder synlige, scroll!</div>
	<div class="item">Billede 1<img src="https://loremflickr.com/590/388/cat?1"></div>
	<div class="item">Billede 2<img src="https://loremflickr.com/590/388/cat?2"></div>
	<div class="item">Billede 3<img src="https://loremflickr.com/590/388/cat?3"></div>
	<div class="item">Billede 4<img src="https://loremflickr.com/590/388/cat?4"></div>
	<div class="item"></div>
</div>
.item {
  margin-top: 190vh;
  margin-left: 0;
}

.status {
  position: fixed;
  top: 0;
  right: 20px;
  padding: 15px 30px 12px;
  color: #fff;
  background-color: #cc4848;
  z-index: 100;
 }


.container {
  height: 100vh;
  overflow: auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  background-color: #09061B;
}

.subtext {
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
    text-transform: none;
}