画面スクロール時にサイトのヘッダーやフッターを固定する

画面スクロール時にヘッダーやフッターを固定したいときもあります。Twenty Fourteenのようにヘッダーがシンプルな場合は、スクロールしても常にヘッダーやフッターが表示されていても邪魔にならないでしょう。

以下、Twenty Fourteenを例にヘッダーとフッターを固定するCSSの例を紹介します。

/* ヘッダー固定 */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
}

/* フッター固定 */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48px;
}

動作イメージは次のようになります。

その他のテーマでは微調整（というより、かなりの調整）が必要な場合があります（bodyタグに対するpadding指定など）が、基本的にはヘッダーやフッターのCSSセレクタを指定してpositionをfixedにすれば、そのパーツが固定される仕組みです。

ふわっと仕上げなのでブラウザによっては上手くいかないことも考えられますが、参考にしてください。