How do I grab the ID of $this using jQuery and Waypoints

Question

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.

HTML

<body class="bg-1">
<div id="content">
    <div class="cover">
        <h2>Title</h2>
        <p class="keep-scrolling">Keep scrolling along</p>
    </div>
    <section class="stats">
        <article id="bg-1">
            /* stuff */
        </article>
        <article id="bg-2">
            /* stuff */
        </article>
        <article id="bg-3">
            /* stuff */
        </article>
        <article id="bg-4">
            /* stuff */
        </article>
    </section>
</div>
</body>

Javascript

$(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");
    };

  });
});

I've a number of way to grab the ID, but can't get the syntax right.

score 2 · Accepted Answer · edited May 23 '17 at 10:27

2

You are using the callback-function of waypoint wrong.

Refering to the API this should be working for you:

$(function() {
  $("article").waypoint({
    handler: function(direction) {
      $("body").removeClass(function(index, css) {
        return (css.match(/(^|\s)bg-\S+/g) || []).join(' ');
      });
      //or $("body").removeClass();
      $("body").addClass(this.element.id);
    }
  });
});

I tweaked your solution a bit more:

Remove all classes from body starting with bg- (see this answer for reference)
add the id as class (removed unnecessary ´if´ construct)

Example

edited May 23 '17 at 10:27

Community

1
1

answered Oct 06 '16 at 17:02

empiric

7,825
7
37
48

This is great, thanks! However, I did read [this answer](http://stackoverflow.com/questions/1424981/how-to-remove-all-css-classes-using-jquery#1424991) about `.removeClass()` not needing a parameter. Also, I learned [from here](http://imakewebthings.com/waypoints/guides/jquery-zepto/) that you can pass the handler option as the first argument to waypoint. – mapk Oct 06 '16 at 17:24
@mapk yes you are right with the removeClass one. I messed that up. But `$(this)` in the handler-function does not contain the waypoint. ´this´ is a waypoint object containing the actual element. – empiric Oct 06 '16 at 17:43
Thanks for clarifying. – mapk Oct 06 '16 at 17:53

score 0 · Answer 2 · answered Oct 06 '16 at 16:58

mapk, you $this is related to the response of your jquery selector, in your case it retrieves a list of articles elements, and your algorithm is threating it as a single one.

Consider to use a foreach inside your code

$(function() {
  $("article").waypoint(function(direction) {  //callback when waypoint is reached, with direction of scroll as a parameter
    $(this).each(function(i,val){
    var $this = $(val); // 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");
    };


   });

  });
});

How do I grab the ID of $this using jQuery and Waypoints

2 Answers2