eachと$(window).scrollについて

Question

■前提・実現したいこと

ある特定のクラス（.anime-item）に別のクラス（.addAnime）を追加するタイミングを条件分岐させたいです。

▼はじめの分岐：そのクラスが画面内にあるかどうか
（ある場合）：クラスを追加（.addAnime）
（ない場合）→次の分岐

▼2番目の分岐：画面内に入ってきた特定のタイミングでクラスを追加（.addAnime）

該当のソースコード

$(function() {
	$('.anime-item').each(function() {
	　　var itemPos = $(this).offset().top;
	    var scTop = $(window).scrollTop();
	    var winH = $(window).height();
	    var itemDis = itemPos - scTop;
	    var split = 35;

	    if ( 0 <= itemDis && itemDis <= winH ) {
	    	$(this).addClass('addAnime');
	    } else {
	    	$(window).scroll(function () {
	    		var scTop = $(window).scrollTop();

    			if (scTop > itemPos - winH + winH/split) {
		    	$(this).addClass('addAnime2');  //本当は同じaddAnimeを追加したい
			}
	    	});
	    }
	});
});

### ■つまづいてるところ
eachの中に、$(window).scroll(function () {});をいれて、更にif分岐をさせたら
うまく機能してないようで、addClass2の方が追加されませんでした。（else以降が機能していない？）
ちなみに、上記のコードでは、はじめの分岐とあとの違うタイミングでクラスが追加されていることがわかるように、
addAnime2としていますが、最終的には一つのクラスで管理したいと考えています。

### ■補足

jQuery自体を使う際は、普段ほとんどコピーが多く実際書いて使う機会があまりないのですが、
実現したいことがあり調べながら試してみたのですが、つまづいています。

宜しくお願いします。

Comments

[Lulucom]

> つまづいています

どこでどうつまづいているかを具体的に書いて
ソースコードも整形してくれる機能がありますので使うと
回答が得られ易いのではないかと思います。
質問のフォーマットに従って書くと良いのではないかと。

[m.ts10806]

コードはコードブロック```で囲っておきましょう。https://teratail.com/help/question-tips#questionTips3-5-1

[1mlolololm1]

ご指摘ありがとうございます。コードの整形とつまづいているところを追加してみました。

[Lulucom]

ありがとうございます。2箇所の addClass がどちらもうまく機能しなくなった、ということでしょうか。

[1mlolololm1]

上記コードは、機能してる個所を特定したかったため、片方は、addAnimeもう一方は、addAnime2というクラスを追加しているのですが、addAnime2の方（つまり、else以降）が機能していないようです。

[Lulucom]

ありがとうございます。「addAnime2の方（つまり、else以降）が機能していない」というのを質問から読み取れませんでしたので、明記された方が良いと思います。

[1mlolololm1]

上記記載しました。わかりづらい説明で申し訳ありません。。。よろしくおねがいします。

Answer 1

$(this).addClass('addAnime2');  //本当は同じaddAnimeを追加したい

上の this が対象要素を指していないためかと思います。
別の function 内にあるため、別のオブジェクトを指しています。

以下のように function 外から変数で渡せば参照できます。

  } else {
      var $item = $(this); // 変数に入れる
      $(window).scroll(function () {
          var scTop = $(window).scrollTop();

          if (scTop > itemPos - winH + winH/split) {
              $item.addClass('addAnime2');  // 変数を参照する
          }
      });
  }

Comments

[1mlolololm1]

おっしゃる通りでした！上記のように外から変数で渡せば意図通りに通りに動きました。
大変勉強になりました。ありがとうございました！

[Lulucom]

良かったです。ありがとうございました。