ページ上/下端に要素を表示し続ける

 ナビゲーションバーやヘッダー/フッターなど,スクロールしても上下端に表示し続けたいことがある.実はいまとても簡単に実装できるのだ.

header
{
    position: sticky;
    top: 10px;
}
footer
{
    position: sticky;
    bottom: 10px;
}

 このコードだとheaderは上端に,footerは下端に表示され続ける.ポイントはposition: sticky;である.topbottomと組み合わせることで,スクロールしても粘り強く表示できる.