движение при скроле

var lastScrollTop = 0; 
$(window).scroll(function(event) { 
  var st = $(this).scrollTop(); 
  if (st > lastScrollTop) { 
    $(window).scroll(function() { 
      $(".baloon1 img").css("width", "+=10px"); 
    }); 
  } else { 
    $(window).scroll(function() { 
      $(".baloon1 img").css("width", "-=10px"); 
    }); 
  } 
  lastScrollTop = st; 
});

html, 
body { 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
 
<main> 
  <header> 
    <div class="mega"></div> 
    <div class="baloon1"><img src="img/baloon1.png"></div> 
    <div class="baloon2"><img src="img/baloon2.png"></div> 
    <div class="baloon3"><img src="img/baloon3.png"></div> 
  </header> 
  <section> 
    Hello World 
  </section> 
</main>