WEB系キャンパス

上スクロールした時のみ固定させたボタンやナビゲーションを表示させる方法【jQuery】

スマホは表示領域が少なく、見せたい情報は多い。
よく問い合わせなどのコンバーション要素を固定させて、常に表示させている事が多いけど、今問い合わせる気がなく、サイト内をじっくり見たいユーザーなどにとっては、ジャマ以外の何物でもない。
サイトのジャンルによっては、それでもお構いなしにアピールしてもいいかもしれないけど、基本的に上から下に見ていくサイトでは、

  • 下スクロールする時はボタンを見せない
  • 上スクロールの時だけボタンを見せる

っていう動きもいいかもしれない。jQueryとCSSで比較的簡単に表示させれるので、備忘録。
【HTML】

  <div class="foot_fix_btn">
    <ul>
      <li><a href="tel:0000000"><img src="img/foot-tel-sp.png" alt="電話で問い合わせる"></a></li>
      <li><a href="#p_contact"><img src="img/foot-contact-sp.png" alt="資料請求をする"></a></li>
    </ul>
  </div>

【jQuery】

$(function() {
    var startPos = 0,winScrollTop = 0;
    $(window).on('scroll',function(){
        winScrollTop = $(this).scrollTop();
        if (winScrollTop >= startPos) {
            $('.foot_fix_btn').addClass('js_hide');
        } else {
            $('.foot_fix_btn').removeClass('js_hide');
        }
        startPos = winScrollTop;
    });
});

【CSS】

.foot_fix_btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.foot_fix_btn.js_hide {
    transform: translateY(100%);
}

HTMLは「position: fixed;」で固定するので、基本的にどこでもよし。
jQueryは下スクロールと上スクロールを判別して、classを出したり、消したりしている。
CSSは「js_hide」のclassがある時(下スクロール時)では「transform」でモニター領域の下に隠しています。

↓装飾するとこんな感じ
DEMO

コメントを残す

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