jQuery グローバル変数とローカル変数について?
初歩的な質問です
jQueryでスティッキーヘッダーを実装していました。
が、実装中に以下のエラーが来ました。おそらくjQueryの定義について理解していないため起きたのだと思うのですが、色々と手を動かしても解決しません
発生している問題・エラーメッセージ
[ts] '$jqObjOffsettop' が宣言されていますが、その値が読み取られることはありません。
[ts] '$currentHeight' が宣言されていますが、その値が読み取られることはありません。
該当のソースコード
jQuery
1$(function () { 2 const $win = $(window) 3 4 $(".navbar").each(function () { 5 $win.on("scroll", function () { 6 var $jqObj = $(".navbar") 7 var $jqObjOffsettop = $jqObj.offset().top; 8 var $currentHeight = $(document).scrollTop(); 9 }); 10 if ($currentHeight > $jqObjOffsettop) { 11 $jqObj.addClass("sticky"); 12 } else { 13 $jqObj.removeClass("sticky"); 14 } 15 }); 16}); 17 18
HTML
1 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 2 <a class="navbar-brand" href="#">LOGO</a> 3 <ul class="nav justify-content-end"> 4 <li class="nav-item"> 5 <a class="nav-link active" href="#">Active</a> 6 </li> 7 <li class="nav-item"> 8 <a class="nav-link" href="#">Link</a> 9 </li> 10 <li class="nav-item"> 11 <a class="nav-link" href="#">Link</a> 12 </li> 13 <li class="nav-item"> 14 <a class="nav-link disabled" href="#">Disabled</a> 15 </li> 16 </ul> 17 </nav>
CSS
1.sticky{ 2 position:sticky; 3 top:0; 4 background-color: black; 5}
試したこと
if以下の文を$win.のブロックの中に入れたら作動しますが、スクロールごとにif文が働くためにヘッダー部分がいちいち固定され失敗します
回答3件
あなたの回答
tips
プレビュー