title: How do I grab the ID of $this using jQuery and Waypoints
body: <p>I'm trying to grab the ID of a waypoint element and then add that ID value as a class to the body when scrolling reaches that waypoint. This doesn't seem to work though.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body class="bg-1"&gt;
  &lt;div id="content"&gt;
      &lt;div class="cover"&gt;
          &lt;h2&gt;Title&lt;/h2&gt;
          &lt;p class="keep-scrolling"&gt;Keep scrolling along&lt;/p&gt;
      &lt;/div&gt;
      &lt;section class="stats"&gt;
          &lt;article id="bg-1"&gt;
              /* stuff */
          &lt;/article&gt;
          &lt;article id="bg-2"&gt;
              /* stuff */
          &lt;/article&gt;
          &lt;article id="bg-3"&gt;
              /* stuff */
          &lt;/article&gt;
          &lt;article id="bg-4"&gt;
              /* stuff */
          &lt;/article&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(function() {
    $("article").waypoint(function(direction) {  //callback when waypoint is reached, with direction of scroll as a parameter
      var $this = $(this); // caching the waypoint element
  
      if($this.attr("id") == "bg-1") {
        $("body").removeClass();
        $("body").addClass('bg-1');
      } else if($this.attr("id") == "bg-2") {
        $("body").removeClass();
        $("body").addClass("bg-2");
      } else if($this.attr("id") == "bg-3") {
        $("body").removeClass();
        $("body").addClass("bg-3");
      } else if($this.attr("id") == "bg-4") {
        $("body").removeClass();
        $("body").addClass("bg-4");
      } else {
        $("body").addClass("bg-1");
      };
  
    });
  });
  </code></pre>
  
  <p>I've a number of way to grab the ID, but can't get the syntax right.</p>