今はHPはレスポンシブ対応がほとんどで、PCで表示したコンテンツを内容はそのままに、レイアウトを変更してスマホでも閲覧できる仕組みなっています。
その分、PCの情報をスマホで見ると縦長になり、情報を見るたびに指でスクロールする必要があるわけですが、その際にグローバルナビと言われる各ページへ移動するためのボタンを設置し、途中からページへ移動できるようにする工夫が必要となります。
ページの上部に固定していると下へスクロールするたびに遠くなり、別のページに行くためには最上部まで戻る必要があります。
それを少しでも負担軽くするためにモニター上部へ固定する方法がありますが、これをするとその分の表示枠を消費し、さらに小さく限られた画面で情報をみることになります。
そこで工夫する内容は、スマホアプリでよくみられる、下へスクロール中は非表示し、上へスクロールしたときに表示するという仕組みです。
X（旧Twitter）ではそのような動作で画面にメニューがひょこひょこ表示非表示を繰り返しています。
これをjQueryで実装する方法を記録しておきます。
<script>
// 現在の位置を保持
let currentPosition = 0;
let nav;
let navHeight;
let f_nav;
let f_navHeight;
// ブラウザ読み込み、もしくはリサイズしたとき
$(window).on("load resize", function(){
// ヘッダーの高さを取得
nav = document.querySelector("#nav");
navHeight = nav.clientHeight * -1;
f_nav = document.querySelector("#sp_footer");
f_navHeight = f_nav.clientHeight * 1;
})
$(function(){
// 画面スクロールしたとき
$(window).on("scroll", function(){
// スクロール位置を保持
let scrollPosition = document.documentElement.scrollTop;
// スクロールに合わせて要素をヘッダーの高さ分だけ移動（表示域から隠したり表示したり）
if (currentPosition <= scrollPosition) {
nav.style.transform = "translate(0," + navHeight + "px)";
f_nav.style.transform = "translate(0," + f_navHeight + "px)";
} else if (currentPosition > scrollPosition) {
nav.style.transform = "translate(0, 0)";
f_nav.style.transform = "translate(0, 0)";
}
currentPosition = document.documentElement.scrollTop;
});
})
</script>
これでスクロール時に表示非表示の動作は確認できると思いますが、このままでは０と１の動きでパッパパッパと急に動くだけです。
どうせなら表示までをスムーズにぬるっとする感じに一工夫したいと思います。こんな場合は、対象のブロックにCSSでプロパティと値をつけます。
transition: transform 0.3s;
限られた小さい画面を上手く有効活用したいため、メニューの設置方法や表示方法は工夫するだけでだいぶ変わりますね。