グローバルナビをスクロール途中で画面トップにくっつける
※ほぼ初めてのJSで苦労したので自分用メモ。時間のあるときに綺麗に書き直します。
JavaScriptでもCSSでも対応可能。
JavaScriptで実装する場合
HTML
<header class="header">
<div>
<img src="./images/Top-img.jpg" alt="トップ画像" class="contents-header__img">
</div>
<nav class="contents-navigation-bk" id="global-nav">
<ul class="navigation">
<li class="nav-parts"> <a href="./#">A</a> </li>
<li class="nav-parts"> <a href="./#">B</a> </li>
<li class="nav-parts"> <a href="./#">C</a> </li>
</ul>
</nav>
</header>
JS
$(window).on("load scroll",function(){ //loadした時とscrollした時を監視
let $globalNav = $("#global-nav"), //変数にグローバルナビ要素を格納//
$distance = 317, //グローバルナビのTOP位置を取得
$scrollVal = $(window).scrollTop(); //ブラウザで表示されているtop位置を取得
if($scrollVal>$distance){ //表示されている位置が#global-navを過ぎたら $globalNav.addClass("fix");
}else{
$globalNav.removeClass("fix");// $globalNav.css("margin-top",0);
}
});
もともと「$distance = $globalNav.offset().top, 」と指定したが、画面が上下に揺れる現象が発生。
console.log();でそれぞれの値を確認したところある箇所で$globalNavの値が一瞬大きくなっていたので、$distance = 317；と試しに数値を入れたら安定した。*1
CSSで実装する場合
CSSだけで実装可能な方法もあるらしい。
今回はJSを使いたかったためJSで実装したが、こちらはかなり簡単そう。
次回使ってみます。
