h2見出しが画面最上部に固定されるのを解除する方法

このテーマでは、見出しにh2タグを使うと、そのセクションの終わりまでその見出しが画面最上部に固定されます。テーマを作成しているときにこのcssを知って採用したのですが、使っているうちに若干ウザくも感じられるようになりました。なので、今回はそれを解除する方法です。

固定している部分のcss

まず、固定されるh2に関するcssは以下のようになっています。

.entry-content h2{
    background: #009688;
    color: #fff;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 1.1em 1em;
    margin: 3em 0 1em 0;
    font-size: 1.4rem;
    line-height: 1;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

この最後のposition: -webkit-sticky; position: sticky; top: 0;が固定する部分になります。

解除する方法

デザインcssに以下の記述を加えてください。

.entry-content h2{
    position: relative;
}

これでOKです。解除されると思います。

逆に、h3を固定したい時は

.entry-content h3{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

を加えればh3が固定されるようになります。

ヘッダーメニューを固定

このposition: sticky;は面白いですね。これを使えば、ヘッダのタイトル下部分を固定することもできます。グローバルナビゲーション部分をjQueryなど使って固定する方法もありますが、簡易的にはこれを使っても実現できます。

#top-editarea{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 50;}

ただし、タイトル下部分に記述したものすべてが固定されるので、ナビゲーション以外に広告なども表示させている場合はそれも固定されてしまうので気をつけてください。（Googleアドセンスの場合は、広告が固定されると違反になります。）

ヘッダーメニュー以外にも、例えばサイドバーの最下段のものを固定する、ということもcssだけでできそうです。おもしろいですね。