特定要素が画面上部にきたら背景がスクロールについていかずに固定されるようにしたい

レスポンシブサイトで特定要素の背景が画面上部にきたらスクロールについていかずに固定されるようにしたいです。

下図のようなページがあった時に２のように要素Bがヘッダーの下にくっついたら赤色背景が固定されるような動きをつけたいと考えています。
（要素A、要素B、要素Cの高さはそれぞれ異なります）

１）要素Bはヘッダーにくっついていないので赤色背景もスクロールについてくる

２）要素Bがヘッダーにくっついたので赤色背景はスクロールについてこなくなる（位置が固定される）

３）スクロールを続けると要素Bの赤背景が固定されたまま要素Cが要素Bの赤背景の上を通り過ぎる

background-attachment:fixed がスマホでは使えないようなので、
HTMLにimgで画像を入れて背景画像のように見せながらヘッダーにくっついたらクラス名「fixed」を追加して「position:relative;」を「position:fixed;」に変更する
という方法を試してみましたが、画面に固定される時にビクッと動いてしまい動きがぎこちなくなってしまったり、スマホでは画像が変に拡大されてしまったりしてしまいました。

Javascript
1	$(function() {
2		var $win = $(window);
3		var windowWidth = window.innerWidth;
4		if (windowWidth > 600) {
5			$(window).on('load resize scroll', function() {
6				var windowYF = $(window).scrollTop() + $('.bg__fix').height();
7				$('.bg__fix').each(function() {
8					var diffYF = windowYF - $(this).offset().top + 80;
9					if (diffYF > $(this).height()) {
10						$(this).addClass('fixed');
11					} else if (diffYF > 0) {
12						$(this).removeClass('fixed');
13					}
14				});
15			});
16		} else {
17			$(window).on('load resize scroll', function() {
18				var windowYF = $(window).scrollTop() + $('.bg__fix').height();
19				$('.bg__fix').each(function() {
20					var diffYF = windowYF - $(this).offset().top + 50;
21					if (diffYF > $(this).height()) {
22						$(this).addClass('fixed');
23					} else if (diffYF > 0) {
24						$(this).removeClass('fixed');
25					}
26				});
27			});
28		}
29	});
30

https://github.com/Prinzhorn/skrollr
また、こちらのプラグインを使用して実現できないかと考えたのですが、私の入れ方が悪いのかこのプラグインを導入すると独自に実装したJSがタブレットやスマホで動かなくなってしまったり、bodyの高さ取得がおかしくなってしまいページ下部に余白ができたろしてしまいます。

動かなくなるJS
https://teratail.com/questions/77289

別の方法で実装できないかと思い調べてみたのですが、スマホでは動かなかったりしてなかなか良い方法を見つけられません。
おすすめの実装方法を教えていただけないでしょうか？

対応ブラウザは下記を想定しています。
・IE9以上（IE9は背景が固定されていなくてもOK）
・Chrome、Firefox、スマホ、タブレットは各最新版

何卒よろしくお願いいたします。