Background image not changing properly with 'Offset' in Waypoints.js

Here is some Javascript and CSS from my program:

<script>
var $body = $('body');


$body.waypoint(function (direction) {
  if (direction == 'down') {
      $body.addClass('body2'); 
  } else{
      $body.removeClass('body2');
  }
}, { offset: '50%'});


</script>   


    
    
<style>
body {
  background-image: url("images/image1.png");
  background-repeat: no-repeat;
  background-position: 400px 200px;
  background-size: 900px 300px;
  margin-right: 400px;
  background-attachment: fixed;
}


.body2 {
  background-image: url("images/image2.png");
  background-repeat: no-repeat;
  background-position: 400px 200px;
  background-size: 900px 300px;
  margin-right: 400px;
  background-attachment: fixed;
}

I'm trying to change the background image from image1 (body) to image2 (body2) as I scroll 50% of the way down the page. However, when I launch the program the only image displayed is image2 and nothing changes as I scroll. Any help would be greatly appreciated, thanks in advance!

I've actually figured out the problem. All I needed to do was set the offset percentage as negative.