javascript - 在 JQuery 中未正确添加或删除类

Question

这是我项目中的一段代码：

<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>

正如您从 javascript 中看到的那样，在页面向下滚动到一半后，我试图将image2(位于body)替换为 (image1位于)，但是，这并没有发生。body2当前image2出现在一块文本旁边，当我滚动时没有任何反应。关于如何解决这个问题的任何建议？提前致谢。