Как настроить элемент в контейнере для прокрутки как фиксированный элемент?

Я разделил одну веб-страницу на три раздела, используя теги разделов HTML. Я создал два div в первом разделе: родительский и дочерний. Я не создавал никаких разделов во втором или третьем разделе. Родительский элемент содержит скрытый прямоугольный элемент, вложенный в центр родительского контейнера, который сам находится в центре первой секции. Каждый из трех разделов отображается в полноэкранном режиме.

Когда пользователь прокручивает первый раздел, появляется прямоугольник. Как только пользователь прокручивает до середины второго раздела, прямоугольник масштабируется в 4 раза по сравнению с исходным размером (или увеличивается) и заполняет второй раздел.

Проблема в том, что я использовал CSS, «position: fixed», чтобы центрировать скрытый элемент прямоугольника в первом разделе, но я не могу заставить прямоугольник после его масштабирования во втором разделе прокручиваться вверх и вниз со вторым разделом, когда пользователь прокручивает до третьего раздела. Прямоугольник кажется привязанным к области просмотра, а не к контейнеру второй секции. Я хочу, чтобы он был привязан к контейнеру второго раздела, а не к области просмотра. Я попробовал «position: sticky» и «position: relative», чтобы связать прямоугольный элемент с его контейнером, чтобы он прокручивался вместе со вторым разделом, но по какой-то причине это останавливает функцию масштабирования моего прямоугольного элемента во втором разделе. Пожалуйста помоги!

myID = document.getElementById("myID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 1) {
    myID.className = "child show"
  } else {
    myID.className = "child hide"
  }
};

window.addEventListener("scroll", myScrollFunc);

myID = document.getElementById("myID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 729) {
    myID.className = "child scale"
  }
};

window.addEventListener("scroll", myScrollFunc);

* {
  padding: 0;
  margin: 0;
}

section {
  height: 100vh;
  overflow: hidden;
}

.one {
  background-color: greenyellow;
}

.two {
  background-color: orangered;
}

.three {
  background-color: aqua;
}

.parent {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  width: 274px;
  height: 154px;
  position: fixed;
  background: plum;
  z-index: 1;
  transition: all .5s;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

.scale {
  transform: scale(4);
}

<section class = "one">
  <div class = "parent">
    <div id = "myID" class = "child hide scale"></div>
  </div>
</section>
<section class = "two">
</section>
<section class = "three">
</section>

🤔 А знаете ли вы, что...
JavaScript поддерживает модульную структуру, что способствует организации кода на больших проектах.