メインビジュアルを過ぎたらサイドナビを表示させる方法
Webサイトのユーザビリティを高めるため、ファーストビュー（KV）ではナビゲーションを隠し、コンテンツエリアに入ってから追従メニューを表示させたい場合があります。
この実装で注意すべき点は、単に透明にするだけでは「見えないボタン」が誤ってクリックされてしまう（ゴーストボタン問題）可能性があることです。
今回は、この問題を回避し、レイアウト変更にも強い安全で実用的なjQueryコードを紹介します。
【コピペOK】実装コード一式
以下のコードを実装することで、見た目のアニメーションだけでなく、機能面でも安全なサイドナビが完成します。
HTML
KVエリアには固有のID（#kv-area）を指定します。
<section id="kv-area">
<h1>Main Visual</h1>
</section>
<section id="contents-area">
<h1>Contents</h1>
</section>
<div class="side-nav">
<p>サイドナビ</p>
</div>
CSS
opacity（透明度）だけでなく、visibility（可視性）も制御するのがポイントです。
- 初期状態:
visibility: hidden;で完全に無効化（クリック不可）。 - 表示状態（.is-show）: クラスが付与されたら可視化。
/* エリアごとの共通設定 */
#kv-area,
#contents-area {
padding: 200px 0;
background: #ccc;
}
/* 見出しのスタイル */
#kv-area h1,
#contents-area h1 {
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
margin: 0;
}
#contents-area {
background: #f3f8fc;
}
/* サイドナビのスタイル */
.side-nav {
/* --- レイアウト・装飾 --- */
padding: 10px;
width: 125px;
text-align: center;
background: #fff;
position: fixed;
right: 0;
top: 20px;
z-index: 1;
box-shadow: 0 0 35px 0 rgba(0, 0, 0, .1);
border-radius: 10px 0 0 10px;
line-height: 1.2;
font-weight: bold;
overflow: hidden;
/* --- アニメーション・表示制御 --- */
opacity: 0; /* 透明にする */
visibility: hidden; /* 存在を隠す（クリック判定も消える） */
/* opacityとvisibilityの両方をアニメーションさせる */
transition: opacity .3s ease, visibility .3s ease;
}
/* 表示用のクラス */
.side-nav.is-show {
opacity: 1;
visibility: visible;
}
JavaScript (jQuery)
スクロール位置を監視し、条件に応じてクラス（.is-show）を付け外しします。
$(function () {
// サイドナビ要素を取得
const sideNav = $('.side-nav');
// KVエリア（#kv-area）の高さを取得
// ※ID指定することで、HTML構造が変わっても対象がズレません
const kvHeight = $("#kv-area").outerHeight();
// ウィンドウのスクロール量を保持する変数
let window_position;
// スクロールイベントを設定
$(window).scroll(function () {
// 現在のウィンドウのスクロール量を取得
window_position = $(window).scrollTop();
// KVエリアの高さを過ぎたら
if (window_position >= kvHeight) {
// 表示用クラスを付与
sideNav.addClass('is-show');
} else {
// 表示用クラスを除去
sideNav.removeClass('is-show');
}
});
// ページ読み込み時（リロード時）にもスクロールイベントを強制発火
$(window).trigger("scroll");
});
このコードの重要ポイント
1. 誤クリックを防ぐ visibility 制御
単に opacity: 0; にしただけでは、要素は見えなくても存在し続けるため、誤ってクリックしてしまうリスクがあります。
CSSで visibility: hidden; を併用し、表示時のみ visible に戻すことで、非表示の間はクリック判定も完全になくしています。
2. 基準位置のズレを防ぐ ID指定
基準となる高さを取得する際、$("section") のような汎用的な指定ではなく、$("#kv-area") とIDで指定しています。
これにより、HTML構造が変わり、KVの上に別のセクションが追加されたとしても、基準がズレることなく正常に動作します。
まとめ
スクロール連動のUIは、「消えている時の挙動」まで考慮することで品質がグッと上がります。
今回のコードはクラスの着脱（addClass / removeClass）で制御しているため、デザイン変更にも柔軟に対応可能です。ぜひWeb制作の現場で活用してください。
よくある質問（FAQ）
CSSの transition に visibility も書くのはなぜですか？
「ふわっと消える」動きを実現するためです。transition に visibility を含めないと、不透明度が0になる前に一瞬で非表示（hidden）になってしまい、アニメーションが途切れてしまうことがあります。
.css() で直接スタイルを変えるのと、addClass はどちらが良いですか？
addClass（クラスの付け替え）を推奨します。JavaScriptは「条件判断」に専念させ、見た目はCSSファイルで管理するよう役割分担することで、後からデザイン修正がしやすくなるからです。
スマホの時だけこの機能を無効にしたいです。
CSSのメディアクエリで調整するのが最も簡単です。スマホサイズ（例: 768px以下）では .side-nav に対して display: none; を指定するか、あるいは最初から常時表示にするなどのスタイルを上書きしてください。