Cómo añadir animación a la div activa en la ventana de desplazamiento?

en:

Tengo varias Div en mi página. Esta div contiene tamaño y color. Cuando desplazarse hacia abajo, div visible a la pantalla debe moverse hacia arriba y cuando desplazarse hacia arriba, se debe volver a su posición original.

Este es el código hasta ahora he intentado. Con este código, cuando me desplazo hacia abajo, div se mueve hacia arriba, pero cuando me desplazarse hacia arriba, div no se viene abajo. ¿Puede alguien por favor me ayude?

function isElementInViewport(el) {
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }
  var rect = el.getBoundingClientRect();
  return (
    (rect.top <= 0 &&
      rect.bottom >= 0) ||
    (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight)) ||
    (rect.top >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
  );
}

window.addEventListener('scroll', function(e) {

  winScrollTop = $(this).scrollTop();

  var elementsToShow = document.querySelectorAll('.rectangle');
  Array.prototype.forEach.call(elementsToShow, function(element) {
    if (isElementInViewport(element)) {
      element.classList.add('is-visible');
    } else {
      element.classList.remove('is-visible');
    }
  });
});

.rectangle {
  background-color: red;
  height: 444px;
  width: 100px;
  /* margin-top: -98px; */
  z-index: -30;
  transition: 0.5s;
  transform: translateY(-98px);
  margin-bottom: 25px;
}

.is-visible {
  transform: translateY(-250px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>

Sr. Khan:

Así que lo que hice aquí es que en primer lugar he comprobado el evento de desplazamiento y luego decidió si el desplazamiento era en realidad hacia arriba o hacia abajo. Una vez que I identificadas si estaba de desplazamiento hacia arriba o hacia abajo, añadí las clases respectivamente. Para la clase no-visibles estoy fijando transformar estilo: translateY (0 px), que simplemente devuelve el elemento a su lugar predeterminado.

.not-visible{
  transform: translateY(0px);
}


var lastScrollTop= 0;
window.addEventListener('scroll', function(e) {
  winScrollTop = $(this).scrollTop();

  var st = window.pageYOffset || document.documentElement.scrollTop; // Credits:
  var elementsToShow = document.querySelectorAll('.rectangle');
     if (st > lastScrollTop){ // If st is greater than lastscrollTop then it is downward
      console.log("down");

       // then check if elemetnts are in view
       Array.prototype.forEach.call(elementsToShow, function(element) { 
            if (isElementInViewport(element)) {

              element.classList.remove('not-visible'); // remove class notvisible if any
              element.classList.add('is-visible'); // Add class isvisible 
            }
               lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling

       });
    } else {
      console.log("up");

       Array.prototype.forEach.call(elementsToShow, function(element) { 
           if (isElementInViewport(element)) {
              // Remove class isvisible and add class not visible to move the element to default place
              element.classList.remove('is-visible'); 
              element.classList.add('not-visible');
           }
              lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling

       });

    }


});