前回position: stickyでパララックス風の動きを実装しました。今回はヘッダーやフッターを固定する方法をお伝えします。
初めにposition: stickyがどんな動きをするか知りたい方はこちらの記事もご覧ください。
まずはデモをご覧ください。
See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.
設定は以下CSSで簡単に設定できます。
header{
position: sticky;
position: -webkit-sticky; /* Safari 12.1以前では必要 */
top:0
}footer{
position: sticky;
position: -webkit-sticky; /* Safari 12.1以前では必要 */
bottom:0
}HTML
<body>
<header>
<p>ヘッダー</p>
</header>
<div class="content">
<p>コンテンツ1</p>
</div>
<div class="content">
<p>コンテンツ2</p>
</div>
<div class="content">
<p>コンテンツ3</p>
</div>
<footer>
<p>フッター</p>
</footer>
</body>CSS
html, body, p{/*リセットcssがはいっていれば不要 */
margin: 0;
}
header{/* ここに指定 */
position: sticky;
position: -webkit-sticky; /* Safari 12.1以前では必要 */
top:0;
margin-top: 0;
}
header p{
background-color: rgb(232, 141, 152);
color: #fff;
height: 30px;
padding: 20px;
}
footer {/* ここに指定 */
position: sticky;
position: -webkit-sticky; /* Safari */
bottom:0
}
footer p{
height: 30px;
padding: 20px;
background-color: rgb(73, 132, 63);
color: #fff;
}
/* 装飾の為のｃｓｓ */
p{
font-weight: bold;
color: aliceblue;
font-size: 2rem;
text-align: center;
margin: 0;
}
.content {
background-color: #434b4b;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}ヘッダーやフッターを固定する方法では、position: fixed もありますが、fixedを指定したコンテンツは高さが無くなるため後に続く要素が下に埋もれてしまいpaddingやmarginで調整が必要です。position: stickyは高さを保持してくれるので、調整する必要がなく便利です！
親要素にoverflow：visible以外（overlow: hidden ;やoverflow: scroll ;）が指定されている
また、position: sticky; は主要ブラウザでサポートされていますが、Safariではベンダープレフィックスを加える必要があります。
以下、書き方です。
position: -webkit-sticky; /* Safari */
stickyは親要素の中で動くので、親要素の高さを指定しないと効きません。
position: sticky; は、貼り付ける位置（top, left, right, bottom）を指定しないとうまく動きません。
left, right, bottomを指定しない場合でも、「top:0」は一緒に指定してください。
次回は、position: stickyを使用してサイドスクロールをする方法を紹介していきます。