Показывать отдельные DIVs при прокрутке (ленивая загрузка содержимого внутри контейнера при прокрутке)

Question

Я пытаюсь проверить видимость каждого раздела и показывать контент (ленивая загрузка), когда раздел виден в окне браузера (видимый раздел за разделом).

Но когда секция запускается в первый раз Весь контент DIVs (ленивый) появляется все сразу. Он должен показывать первый видимый раздел, затем еще один после дополнительной прокрутки и т. Д.

Вот ручка: https://codepen.io/epsilonhydrae/pen/jegqqV

Спасибо!

$(document).ready(function() {
  // Every time the window is scrolled ...
  $(window).on("resize scroll", function() {
    // Check the location of each desired element
    $(".lazy").each(function(i) {
        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height()
        // If the object is completely visible in the window, show it
        if (bottom_of_window > bottom_of_object) {
          $(this).fadeIn(4000);
        }
      });
  });
});