CSS 下までスクロールしたら隠れていたフッタが現れるサンプル

Webサイト制作

MacのSafariでテストしています。

フッタは、スクロールした時コンテンツの下に繋がっていて、
上にスクロールすると一緒に上がってくるのが普通ですよね。

違う演出をしていたサイトがあったのを思い出したので、ちょっとチャレンジ。

コンテンツが終わったかな・・・の後に更にスクロールしていくと、
下に隠しておいたフッタが現れる（様に見える？）サンプルをCSSで。

html



<div id="rapper">

	<div id="whitebase">

	</div>

</div>
<div id="footer">

	<div id="fBox">

		テキストテキスト

	</div>

</div>

CSS



body {

	margin: 0;

	padding: 0;

}
#rapper {

	width: 100%;

	background-color: #fff;

	margin: 0;

	padding: 0;

}
#whitebase {

	margin: 0 auto;

	padding: 0;

	background-color: #f0f0f0;

	margin-bottom: 170px;

	width: 940px;

	height: 1000px;

	border: 1px solid #999;

}
#footer {

	z-index: -1;

	width: 100%;

	position: fixed;

	bottom: 0;

}

#footer #fBox {

	margin: 0 auto;

	padding: 0;

	height: 150px;

	background-color: #c33;

	font-size: 48px;

	color: #fff;

	text-align: center;

	width: 940px;

}

# ####
# ### At Bat Web Studio　出水ベースのWeb屋
# ## サイバーまめカン　ストックメディア
# #