html/jsでスクロール途中で画像を切り替える実装をしたい

Question

https://codepen.io/yutas01/pen/povgqez

上記のURLにソースがあるのですが、それぞれの水玉が下の水玉に押し出され、画面の半分以上上に来たら灰色に変化するという動きを実装したいのですが、少しスクロールしただけで全ての水玉が灰色になってしまいます。どのような記述をすればよいのでしょうか。

それと、現在position: sticky; を使用して押し出される動きを付けているのですが、このプロパティがIE11に対応していません。
どうしても対応させたく様々なプラグインを試してみたのですが、挙動がおかしくなってしまったので、position: sticky;を使用しないで押し出される方法にしたいです。
なるべく自分で考えようと思い、positon: relative;とpositon: fixed;をjsで制御させて実装しようと思ったのですが、上手くできなかったので、こちらで質問させて頂きます。（質問丸投げになってしまい、申し訳ありません。。）

<div class="container">
	<div class="cont1">
		<div class="drop-img drop-img2">
			<img src="https://dl.dropbox.com/s/rkox4afc0kmkfj1/drop.png?dl=0" alt="">
			<p class="drop-year">
				2019
			</p>
		</div>
	</div>
	<div class="cont2">
		<div class="drop-img drop-img3">
			<img src="https://dl.dropbox.com/s/rkox4afc0kmkfj1/drop.png?dl=0" alt="">
			<p class="drop-year">
				2018
			</p>
		</div>
	</div>
	<div class="cont3">
		<div class="drop-img">
			<img src="https://dl.dropbox.com/s/rkox4afc0kmkfj1/drop.png?dl=0" alt="">
			<p class="drop-year">
				2017
			</p>
		</div>
	</div>
	<div class="cont4">
		<div class="drop-img">
			<img src="https://dl.dropbox.com/s/rkox4afc0kmkfj1/drop.png?dl=0" alt="">
			<p class="drop-year">
				2016
			</p>
		</div>
	</div>
</div>

.container {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		background: #00a0e9;
		width: 3px;
		height: 100%;
		margin: auto;
	}
}

.drop {
	&-img {
		position: sticky;
		top: 45%;
		text-align: center;
		right: 0;
		left: 0;

		img {
			width: 80px;
		}
	}

	&-year {
		position: absolute;
		color: #fff;
		left: 0;
		right: 0;
		top: 20px;
	}
}

.cont1 {
	background: #FFDEFF;
	height: 600px;
	text-align: center;
}

.cont2 {
	background: #DEFFFF;
	height: 600px;
	text-align: center;
}

.cont3 {
	background: #FFFFDE;
	height: 600px;
	text-align: center;
}

.cont4 {
	background: #C7FFC7;
	height: 600px;
	text-align: center;
}

$(function() {
	$(window).scroll(function() {			
	  var wH = $(window).height();
		var dropH = $('.drop-img').offset().top;

		if ( dropH < $(window).scrollTop() + (wH/2)) {
			$('.drop-img').children('img').attr('src', 'https://dl.dropbox.com/s/ns0be5m1vp0611t/drop_gray.png?dl=0');
		} else {
			$('.drop-img').children('img').attr('src', 'https://dl.dropbox.com/s/rkox4afc0kmkfj1/drop.png?dl=0');
		}
	})
});

Comments

[miyabi_pudding]

謝る前に丸投げにならない質問を心がけましょう。

ソースコードは、コードペンのURLを張り付けるのではなく、
質問本文に含めていただけないでしょうか？

[nyoro]

すみません。質問文下部にソースコードを追加させて頂きました。

[azuapricot]

dropH < $(window).scrollTop() + (wH/2)
最初にスクロールした時点でここの判定が既にTrueになって灰色画像になるようになってますよね
もう一度計算を見直してみては？

Answer 1

1つ目の質問のみですが

$(window).scroll(function() {			
  var wH = $(window).height();
　//すべての$('.drop-img')に対して判定を掛けていたので、いっぺんにグレーに変わってしまう
　//個々の$('.drop-img')に対して、判定を掛けました
  $('.drop-img').each(function(){
    var dropH = $(this).offset().top;
    if ( dropH < $(window).scrollTop() + (wH/2)) {
      $(this).children('img').attr('src', 'https://dl.dropbox.com/s/ns0be5m1vp0611t/drop_gray.png?dl=0');
    } else {
      $(this).children('img').attr('src', 'https://dl.dropbox.com/s/rkox4afc0kmkfj1/drop.png?dl=0');
    }    
  });
})

Comments

[nyoro]

eachメソッドというのがあるのですね...勉強になります。。
動かしてみたのですが確かに一つ一つ色が変わりました。
ありがとうございます！

Answer 2

下記を実装してみて、値の変化を見てください。
dropH を変えれば実装できそうだとわかります。

  <!-- <div class="container">に含める -->
  <div id="test1" style="position:fixed; top:0px"></div>
  <div id="test2" style="position:fixed; top:16px"></div>
  <div id="test3" style="position:fixed; top:32px"></div>
  <div id="test4" style="position:fixed; top:48px"></div>

$(window).scroll(function() {	
  var wH = $(window).height();
  $("#test1").text(wH);
	var dropH = $('.drop-img').offset().top;
  $("#test2").text(dropH);

	if ( dropH < $(window).scrollTop() + (wH/2)) {
    $("#test3").text($(window).scrollTop());
    $("#test4").text($(window).scrollTop() + (wH/2));
    
    
		$('.drop-img').children('img').attr('src', 'https://dl.dropbox.com/s/ns0be5m1vp0611t/drop_gray.png?dl=0');
	} else {
		$('.drop-img').children('img').attr('src', 'https://dl.dropbox.com/s/rkox4afc0kmkfj1/drop.png?dl=0');
	}
})

どうしても対応させたく様々なプラグインを試してみたのですが、挙動がおかしくなってしまったので、position: sticky;を使用しないで押し出される方法にしたいです。

→Polyfillの導入を検討してみてください