スクロール方向に応じてメニューを表示・非表示

下方向へスクロールするとメニューを非表示、上方向へスクロールするとメニューを表示する方法を紹介します。

HTML

jQuery

補足

• スクロール・イベント発生時に、その方向を調べ、メニューを表示・非表示しています。

CSS

補足

• メニューをウィンドウ上端に固定表示されるようスタイルを設定しています。

サンプル

「スクロール方向に応じてメニューを表示・非表示」のサンプル