問題
スマートフォンで固定している上部バーを下スクロール時に隠すには？
解決策
jQueryのスクロールイベントを用いて、直前のスクロール位置より上がっているか下がっているかで判定する。
スマートフォンで固定している上部バーの扱い
スマートフォンで上部バーを固定にさせておくレイアウトは多いのではないでしょうか。
ですが上部バーがずっと出ていることがユーザーにとって煩わしい可能性も…。
そのため、今回はスマートフォンで固定している上部バーを下スクロール時に隠す方法をご紹介します。
- ※今回は固定している上部バーをクラス「topbar」と定義します。
CSSの構築
通常時
高さを65pxと仮定して上部に「position: fixed;」で固定します。
また、上下へなめらかに移動するよう、「transition-duration: 0.3s;」を設定します。
.topbar{
position:fixed;
top:0;
left:0;
width:100%;
height:65px;
z-index:7000;
transition-duration:0.3s;
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-o-transition-duration:0.3s;
-ms-transition-duration:0.3s;
}下スクロール時用（クラス「hide」を付与）
クラス「topbar」にクラス「hide」も付いた場合、「top: -65px;」で画面外に移動させます。
.topbar.hide{
top: -65px;
}javascriptの構築
スクロールイベントを設定します。
var startPos = 0,winScrollTop = 0;
$(window).on('scroll',function(){
winScrollTop = $(this).scrollTop();
if (winScrollTop >= startPos) {
$('.topbar').addClass('hide');
} else {
$('.topbar').removeClass('hide');
}
startPos = winScrollTop;
});- 現在のスクロール位置を取得し、そこから数値が上がったら（下へスクロールしたら）、クラス「topbar」にクラス「hide」を付与します。
- 数値が下がったら（上へスクロールしたら）、クラス「topbar」からクラス「hide」を削除します。
参考
【【jQuery】下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションを作る – WEBDESIGNDAY】
https://webdesignday.jp/inspiration/technique/jquery-js/3657/
コメント