Estoy intentando averiguar cómo hacer un div que se mueve verticalmente en el sentido habitual (el rojo) y otro que haga lo propio pero en el sentido inverso (el azul) al hacer scroll. Adjunto el ejemplo con el que estoy trabajando a ver si alguien puede "arreglarlo".
var recorrido = $(window).scrollTop()
var altura = $(document).height()
var avance = ($(window).scrollTop() / ( $(document).height() - $(window).height() ) ) ;
$(window).scroll(function(){
$('#down_up').css('bottom','avance');
});
body{margin:0;}
#up_down{width:40%; background-color:red;position:absolute; left:3%; top:10%; }
#down_up{ width:40%; background-color:blue; position:absolute; right:17%; bottom:90%; }
.carrusel{ width:100%; height:500px; background-color:orange;}
.carrusel2{ width:100%; height:500px; margin-top:100vh;background-color:orange;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="up_down">
<img class="carrusel">
<img class="carrusel2">
<img class="carrusel2">
<img class="carrusel2">
<img class="carrusel2">
<img class="carrusel2">
</div>
<div id="down_up">
<img class="carrusel2">
<img class="carrusel2">
<img class="carrusel2">
<img class="carrusel2">
<img class="carrusel2">
<img class="carrusel2">
</div>