Check wanneer een gebruiker voorbij een element is gescrolled

Ik wil graag controleren wanneer een gebruiker voorbij de bovenkant van een bepaald element heeft gescrolled.

Momenteel heb ik dit:

$(window).on('load', function() {
  let elembestellen = document.querySelector('#bestellen');
  var bestellen = elembestellen.getBoundingClientRect().top;
  let eleminformatie = document.querySelector('#informatie');
  var informatie = eleminformatie.getBoundingClientRect().top;
  let eleminspiratie = document.querySelector('#inspiratie');
  var inspiratie = eleminspiratie.getBoundingClientRect().top;
  let elemreviews = document.querySelector('#reviews');
  var reviews = elemreviews.getBoundingClientRect().top;

  $(window).scroll(function(){
    w = Math.floor( $(window).scrollTop());

    if(window.outerWidth > 767) {
      // console.log(bestellen);

      if(  (w > parseInt(bestellen))  && (w < parseInt(informatie))     ){
        console.log('#bestellen reached');
      }

      if(  (w > parseInt(bestellen))  && (w > parseInt(informatie)) && (w < parseInt(inspiratie))    ){
        console.log('#informatie reached');
      }

      // if(  (w > parseInt(bestellen))  && (w > parseInt(informatie)) && (w > parseInt(inspiratie)) && (w < parseInt(reviews))   ){
      //   console.log('inspiratie');
      // }

      // if(w > parseInt(informatie)){
      //   console.log('informatie');
      // }

    }
  });
});

Het probleem is dat '#bestellen reached' goed wordt gelogged wanneer ik de pagina laad als ik helemaal naar boven ben gescrolled. Maar als ik een beetje naar beneden scroll en de pagina ververs dan wordt '#bestellen reached' niet meer goed getoond, de log wordt al veel te vroeg zichtbaar ver voordat ik bij het element ben aangekomen.

Hoe komt dat? Hoe kan ik ervoor zorgen dat de if statements true worden wanneer voorbij de bovenkant van het element is gescrolled, hoe de pagina ook geladen is (geladen met scrollbar tegen de bovenkant, of geladen halverwege de page etc).