WEB系キャンパス

footerで止まる問い合わせボタンとかの設置方法(PageTopみたいにFadeさせない)

以前のエントリーで紹介した「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"
          });
      }
  });

DEMO

以前と同じように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の高さに数値分プラスしてくれます。

コメントを残す

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