jQueryを用いたスクロールで要素がアニメーションと共に表示される機能について、ソースコードの改善を行いたいです。

Question

前提・実現したいこと

jQueryを用いたスクロールで要素がアニメーションと共に表示される機能を作りました。
特にエラーはなく動いているのですが、もっとうまいやり方はないかと思い、ご意見を頂けないかと思っています。

気になっているのは、表示する要素の数だけif文が書かれている部分です。

仕組みは、cssであらかじめ要素のopacityを0、bottomを-200pxなどにして
javascript側でcssを変更するといったものです。
アニメーションはtransitionを用いて実装しています。

該当のソースコード

$(window).on('load scroll resize', function(){
	
	// 現在のスクロール値
	let pageOffset = $(window).scrollTop();

	// windowの高さ
	let windowHeight = $(window).innerHeight();

	// 表示マージン
	const ambiguous = 200;

	// 各要素のオフセットと処理
	// プロフィール
	let profile = $('section#profile').offset();
	if(pageOffset > profile.top - windowHeight + ambiguous) {
		$('section#profile').css({
			'opacity':1,
			'bottom': 0
		});
	}

	// インフォメーション
	let info = $('section#info').offset();
	if(pageOffset > info.top - windowHeight + ambiguous) {
		$('section#info').css({
			'opacity':1,
			'bottom': 0
		});
	}
});

補足情報（FW/ツールのバージョンなど）

ソースコードのコメントの 各要素のオフセットと処理　以下の部分が要素の数だけずらっと書いてあります。
こちらにはプロフィールとインフォメーションの２つだけ記載しました。

Comments

[m.ts10806]

> let info = $('section#info').offset();
if(pageOffset > profile.top - windowHeight + ambiguous) {

ここはprofile.top で合ってますか？

[kakedashi_php]

ご指摘ありがとうございます。すみません、正しくはinfo.topです。
実際のソースコードをこちらに張り付けた後、名称を変更した為間違えました。。。

[m.ts10806]

質問内容調整願います。
そのままだとprofile.top を前提とした回答が来てしまうかもしれません。

Answer 1

まず第一段階は要素名をリストで持つとかですね。

※HTMLがないので未検証

const target_list = [
    'profile'
    ,'info'
];

for (const target_name of target_list) {
    let target= $('section#'+target_name ).offset();
    if(pageOffset > target.top - windowHeight + ambiguous) {
        $('section#'+target_name).css({
            'opacity':1,
            'bottom': 0
        });
    }
}

HTMLの構成次第ではリストに持たなくてもできるかもしれません。

Comments

[kakedashi_php]

ご回答ありがとうございます。
確かにこれなら１回ですみますね。
ヒントになりました。ありがとうございます。

[m.ts10806]

あくまで第1段階ですし、HTMLの構成次第というところもあります。
関係個所のHTMLも提示されたほうが良いと思います。