Отображать заголовок для каждого раздела при пересечении фиксированного элемента

Question

У меня есть страница с вертикальной прокруткой с 3 различными разделами, отображаемыми один за другим.Каждый из них имеет ширину и высоту 100%, а также заголовок по центру с фиксированной позицией.

На этой же странице есть также DIV ".centered-container" с фиксированной позицией, ширина на 100%.и высота в 100px.Этот DIV вертикально центрирован внутри окна.

Я пытаюсь сделать следующее:

Каждый раз, когда секция пересекает центрированный DIV, я бы добавил класс «активный» краздел и отображать его название, когда его вершина достигает DIV.И удалите класс и скройте заголовок, когда нижняя часть раздела покидает DIV.

Проблема в том, что когда я начинаю прокручивать окно, все мои разделы имеют класс "активный".

Здеськод для его воспроизведения:

HTML

<div class="centered-container"></div>

<div class="hero active" style="background:red;">
  <div class="title">Title 1</div>
</div>

<div class="hero" style="background:green;">
  <div class="title">Title 2</div>
</div>

<div class="hero" style="background:blue;">
  <div class="title">Title 3</div>
</div>

CSS

.centered-container {
  position: fixed;
  width: 100%;
  height: 100px;
  top: calc(50% - 50px);
  left: 0;
  background: black;
}

.hero {
  width: 100%;
  height: 100vh;
}

.title {
  display: none;
  position: fixed;
  width: 100%;
  top: 50%;
  color: #fff;
  font-size: 50px;
  text-align: center;
  transform: translateY(-50%);
}

.hero.active .title {
  display: block;
}

JS

$(window).scroll(function(){

  var fixed = $(".centered-container");

  var fixed_position = $(".centered-container").offset().top;
  var fixed_height = $(".centered-container").height();

  var toCross_position = $(".hero").offset().top;
  var toCross_height = $(".hero").height();

  $( ".hero" ).each(function() {

    if (fixed_position + fixed_height  < toCross_position) {
      $(".hero").removeClass("active");
    } else if (fixed_position > toCross_position + toCross_height) {
      $(".hero").removeClass("active");
    } else {
      $(".hero").addClass("active");
    }

  });
});

Вот ссылка на сайтс эффектом желания: Пример

Заранее спасибо за помощь!