title: Background image not changing properly with 'Offset' in Waypoints.js
body: <p>Here is some Javascript and CSS from my program:</p>
  <pre><code>&lt;script&gt;
  var $body = $('body');
  
  
  $body.waypoint(function (direction) {
    if (direction == 'down') {
        $body.addClass('body2'); 
    } else{
        $body.removeClass('body2');
    }
  }, { offset: '50%'});
  
  
  &lt;/script&gt;   
  
  
      
      
  &lt;style&gt;
  body {
    background-image: url(&quot;images/image1.png&quot;);
    background-repeat: no-repeat;
    background-position: 400px 200px;
    background-size: 900px 300px;
    margin-right: 400px;
    background-attachment: fixed;
  }
  
  
  .body2 {
    background-image: url(&quot;images/image2.png&quot;);
    background-repeat: no-repeat;
    background-position: 400px 200px;
    background-size: 900px 300px;
    margin-right: 400px;
    background-attachment: fixed;
  }
  </code></pre>
  <p>I'm trying to change the background image from <code>image1</code> (body) to <code>image2</code> (body2) as I scroll 50% of the way down the page. However, when I launch the program the only image displayed is <code>image2</code> and nothing changes as I scroll. Any help would be greatly appreciated, thanks in advance!</p>