CSSでスクロールすると下からカーテンのように現れるフッター

ちょっとした工夫でフッターをおしゃれにできるテクニックの紹介です。かなり簡単に実装できるので、他サイトと差別化したいときなどに便利だと思います。

カーテンフッター

下までスクロールしていくと下層レイヤーからフッターが現れます。


<body>

<main class="main">
  メインコンテンツ
</main>
<footer class="footer">
  フッター
</footer>

</body>
</html>

.main {
  display: block;
  position: relative;
  margin-bottom: 200px;
  z-index: 2;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  z-index: 1;
}

フッターは fixed で常に画面最下部に固定しておき、.main 要素の下に隠しておきます。一番下までスクロールすると margin-bottom によってフッターが出現します。ここでは、フッターの高さは 200px と固定幅にしています。

フッターの高さが可変


.main {
  display: block;
  position: relative;
  margin-bottom: 200px;
  z-index: 2;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  z-index: 1;
}

$(function() {

$('.main').css('margin-bottom', parseInt($('.footer').outerHeight()));

});

フッターの高さが固定値なのはまずないので、JavaScriptでフッターの高さを取得し、その分 .mainmargin-bottom に設定します。