追尾するフッターを最下部手前までスクロールした際に固定にしたい

Question

fixedで追尾させているフッターを、最下部の手前まで移動した際にrelativeに変更し固定したいです。
現在下記コードのように、5120までスクロールした際にクラスを付与し、指定を変更しています。

こちらのサイトのフッターの動きと同じことを実現しようとしています。
https://airregi.jp/reserve/

しかしこの方法だとコンテンツの縦幅が代わった際に設定し直す必要があり、とても手間がかかります。

【実装中のjs】

$(function () {
	var $win = $(window),
		$header = $('.reserve--footer'),
		animationClass = 'is-animation';

	$win.on('load scroll', function () {
		var value = $(this).scrollTop();
		if (value > 5120) {
			$header.addClass(animationClass);
		} else {
			$header.removeClass(animationClass);
		}
	});
});

トップへ戻るボタンのjsを参考サイトより持ってきた際に出来た動きで、こちらでは下から100の値で表示をしています。
こちらの処理を合わせれば最下部手前でのクラスの付与が可能になるのではと考えています。
しかし自分はjｓの知識は皆無で、どの部分がどこにあてまるのかが分かりません。

【topに戻るボタン】

$(function() {
var topBtn = $('.page-top');
topBtn.hide();
$(window).scroll(function () {
var bottomPos = 100;
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if (scrollPosition > scrollHeight - bottomPos) {
topBtn.fadeIn();}
else { topBtn.fadeOut();
}
});

topBtn.click(function () {
$('body,html').animate({
scrollTop: 0}, 500);
return false;
});
});

以上の二つを参考に最下手前でのクラスの付与を可能に、または別な方法がありましたら是非教えて頂きたいです。
どうかよろしくお願いいたしますm(__)m！

Answer 1

スクロール値を追っかけるのって大変ですよね。
今回の場合ページ最下部フッターが出現したタイミングで、追尾フッターをfixedからrelativeあるいはstaticに変更されたいのだと解釈しますと以下のプラグインが手っ取り早いです。

https://github.com/protonet/jquery.inview

こちらは、指定した要素が出現したタイミングで任意の要素に任意の操作ができます。
また、画面から消えた場合にも同様の操作が出来るので今回の案件にはぴったりなのではないかと思います。
ご検討ください。

例文に当てはめますと

$('フッター').on('inview', function(event, isInView) {
if (isInView) {
$('.固定フッター').toggleclass('固定解除クラス');
} else {
$('.固定フッター').toggleclass('固定解除クラス');
}
});

このように、クラスの付与と削除をトグルしてあげれば実現出来ると思います。

Comments

[arue]

shaakさん
ご回答ありがとうございます！
やりたいことかなりが一致ししています！！が、当方の技術不足で
色々ためしてみましたが上手く反映ができませんでした。。。

もしよろしければ上記に当てはまったコードを見せて頂きたいです。
原理をもう少し勉強いたします。。。

[shaak]

inviewの使い方をまず良く読んでみてください。
使い方がわかったら、後はフッターに対してクラスなりIDなりを振ります。
先に書いた例文は、

もしフッターが表示圏内に入ったら｛
fixed表示していた固定要素に何らかのクラスを付与する。（fixedだったものをrelativeにするなど）
}
もし表示圏内から消えたら{
表示圏内に入った際に付与したクラスを削除する。
}

なので、これで動きます。
注意点は固定表示要素はフッター内に配置する事と、固定表示要素の親要素であるフッターの
更に親要素がbodyなどの最上位要素で、かつposition指定がrelativeであること　です。