問題 × 解決策

スマートフォンで固定している上部バーを下スクロール時に隠す

問題

スマートフォンで固定している上部バーを下スクロール時に隠すには?

解決策

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/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

two × 3 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧