Classes not being added or removed properly in JQuery

Question

Here is a piece of code in my project:

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

$dipper.waypoint(function (direction) {
  if (direction == 'down') {
      $dipper.addClass('body2');
  } else{
      $dipper.removeClass('body2');
  }
}, { offset: '50%' });
</script>   

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


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

As you can see from the javascript, I am trying to replace image2(located in body) with image1(located in body2) after I scroll halfway down the page, however, this is not happening. Currently image2 appears next to a block of text and nothing happens as I scroll. Any suggestions as to how I can fix this? Thanks in advance.