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

Question

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

Это код, который я уже пробовал. Это перемещает этот цвет фона не на его место и не возвращается на предыдущую позицию.

	var winScrollTop=0;

	$.fn.is_on_screen = function(){    
		var win = $(window);
		var viewport = {
			top : win.scrollTop(),
			left : win.scrollLeft()
		};
		viewport.bottom = viewport.top + win.height();

		var bounds = this.offset();
		bounds.bottom = bounds.top + this.outerHeight();

		return (!(viewport.bottom < bounds.top || viewport.top > bounds.bottom));
	};

	function parallax() { 
		$('.box').each(function(){
			if ($(this).is_on_screen()) {	
				var firstTop = $(this).offset().top; 

				var moveTop = (firstTop-winScrollTop) * 0.5

				if (moveTop !== "-199") {
					$(".box").css({
						'margin-top': moveTop + "px"
					});
				}
			}
		});
	}



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

  winScrollTop = $(this).scrollTop();

  if (winScrollTop > 1845) {
    parallax();
  }
});

.box {
  height: 744px;
  width: 477px;
  position: absolute;
  margin-top: -98px;
  z-index: -30;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fancy-right">
  <div class="tile-right">
    <!-- first -->
    <div id="blue" class="box"></div>

    <!-- second -->
    <div id="green" class="box">
    </div>
  </div>
</div>

<div class="fancy-left">
  <!-- third -->
  <div id="yellow" class="box"></div>
</div>