以前のエントリーで紹介した「Footer上でPageTopアイコンを止めるjQueryの書き方」は、ファーストビューからスクロールしたら、スクロールボタンが出てきて、Footer手前で止まる仕様でした。
めったに使う機会はないかもしれないけど、ファーストビューの段階でボタンを表示させておいて、フッター手前でピタッと止める方法は、スクロールでフェードさせる部分の記述を消してあげればいい。
jQueryの記述は以下
【jQuery】
$(window).on("scroll", function() { scrollHeight = $(document).height(); scrollPosition = $(window).height() + $(window).scrollTop(); footHeight = $("footer").innerHeight(); if ( scrollHeight - scrollPosition <= footHeight ) { $(".contact-fix").css({ "position":"absolute", "bottom": footHeight + 0 }); } else { $(".contact-fix").css({ "position":"fixed", "bottom": "0" }); } });
以前と同じようにfooterを基準値にpositionの設定が必要なのでボタンはFooterの中に入れておくのが鉄則
【HTML】
<footer> フッター <p class="contact-fix"><a href="#">お気軽にお問い合わせください</a></p> </footer>
【CSS】
footer { position: relative; }
Footerにぴったり止めるんじゃなくて、少し手前とかがいいなら
「 “bottom”: footHeight + 0 」の部分を
「 “bottom”: footHeight + 20 」とかにすると、footerの高さに数値分プラスしてくれます。