画面の下にひょっこり出てくるフッター

yasuko

バンド曲1位はローリングコースターです

ページの一番下にあるはずのフッターを、

少しだけスクロールしたら画面の下にひょっこり表示させたいことありますよね。

ひょっこりするフッターつくってみよう

htmlは普通に作成してOK！

<footer> ・・・ </footer>

cssは前回記事(画面の下にそっと寄り添うフッター)のやったこととほぼ同じ。

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    z-index: 2;
}

$(document).ready(function(){
 $(window).scroll(function() {
  if($(this).scrollTop() > 700) { 
     $("footer").fadeIn(); 
  } else {
     $("footer").fadeOut();
  }
 });
});

なにをやったの？？

• if($(this).scrollTop() > 700)で、700以上スクロールされたら・・・の分岐
• $(“footer”).fadeIn(); で、700以上スクロールされたときにfooterをフェードインさせる
• } else {で、700以上スクロールされたら・・・の分岐にあてはまらない場合を指定（スクロールが700以下の時の処理）
• $(“footer”).fadeOut();で、スクロールが700以下の時はfooterをフェードアウトさせる

すると、画面上部から700pxスクロールしたときにひょっこり表示されるフッターができます。

ファーストビューでフッターは見せたくないけど、

少し進んだらフッター（お問い合わせ電話番号とか？）がひょっこり出てほしいって時に便利です。

2021.8.3追記

ひょっこりしたものの位置を変えるという記事もよかったらどうぞ。