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