jQuery スティッキーヘッダーの実装 変数が定義されていないとエラーが出る

Question

jQuery　グローバル変数とローカル変数について？
初歩的な質問です
jQueryでスティッキーヘッダーを実装していました。
が、実装中に以下のエラーが来ました。おそらくjQueryの定義について理解していないため起きたのだと思うのですが、色々と手を動かしても解決しません

発生している問題・エラーメッセージ

[ts] '$jqObjOffsettop' が宣言されていますが、その値が読み取られることはありません。
[ts] '$currentHeight' が宣言されていますが、その値が読み取られることはありません。

該当のソースコード

$(function () {
    const $win = $(window)

    $(".navbar").each(function () {
        $win.on("scroll", function () {
            var $jqObj = $(".navbar")
            var $jqObjOffsettop = $jqObj.offset().top;
            var $currentHeight = $(document).scrollTop();
        });
        if ($currentHeight > $jqObjOffsettop) {
            $jqObj.addClass("sticky");
        } else {
            $jqObj.removeClass("sticky");
        }
    }); 
});

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">LOGO</a>
        <ul class="nav justify-content-end">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </nav>

.sticky{
    position:sticky;
    top:0;
    background-color: black;
}

試したこと
if以下の文を$win.のブロックの中に入れたら作動しますが、スクロールごとにif文が働くためにヘッダー部分がいちいち固定され失敗します

Comments

[m.ts10806]

タイトルが内容と若干遠いのでもう少し内容に寄せたタイトルにしていただけますか？

[x_x]

エラーを出ないようにすることは簡単ですが、何をしたいのかを書いたほうがいいかもしれません。HTMLとCSSとともに

[goneshi]

ご指摘ありがとうございます！修正させていただきます

Answer 1

$winをscroll時に$currentHeightや$jqObjOffsettopを調べても
その外でifしては意味がないということではないでしょうか？

Comments

[goneshi]

$(".navbar").each(function () {
let $jqObj = $(".navbar"),
$jqObjOffsettop = "",
$currentHeight = "";

$win.on("scroll", function () {
$jqObjOffsettop = $jqObj.offset().top;
$currentHeight = $(document).scrollTop();
});

if ($currentHeight > $jqObjOffsettop) {
$jqObj.addClass("sticky");
} else {
$jqObj.removeClass("sticky");
}
});
このように変更しましたが未だ解決しません

[yambejp]

$win.onの中で参照しないと意味がないでしょう

[goneshi]

その通りでした！解決しました！

Answer 2

無事解決しました！

$(".navbar").each(function () {
    let $jqObj = $(".navbar"),

        $currentHeight = "";

    $win.on("scroll", function () {
        $currentHeight = $(document).scrollTop();
        let $jqObjOffsettop = $jqObj.offset().top;
        if ($currentHeight > $jqObjOffsettop) {
            $jqObj.addClass("sticky");
        } else {
            $jqObj.removeClass("sticky");
        }
    });
});

どうやら最初のコードでscrollごとにoffset().topで値を取得し続けていたためガタガタになっていたんだと思います。
グダグダな質問でしたが回答をくださった方本当にありがとうございました

Answer 3

今提示してるコードだけでは検証が出来ないですが

scrollの中にeachで
eachの中にvarとifではどうですか？
あと、eachの中はthis使えますよ

Comments

[goneshi]

ありがとうございます！解決しました！