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