WordPressテーマの「Simplicity」で表示されるPCのヘッダーを、スクロールで固定表示/非表示するようにしてみた

技術情報

2016.10.302017.03.29

以前「Simplicity」の固定表示されるモバイルメニューを、スクロールで非表示する方法をご紹介いたしました。

WordPressテーマの「Simplicity」で固定表示されるモバイルのメニューを、スクロールで非表示するようにしてみた

当サイトで採用しているWordPressテーマの「Simplicity」は非常に高機能で、カスタマイズでモバイルのメニューをブラウザのトップに表示して固定する機能があります。ただ、モバイルのメニューをブラウザのトップに固定すると、コンテン

今回はPCのヘッダーをスクロールで固定、または非表示にしてみたのでご紹介いたします。

js
footer-insert.php
css
1. style.css
2. mobile.css
動作確認
まとめ

js

下記のjsを「slide-header.js」などとして、「Simplicity」の子テーマにアップロードします。

var startPos = 0;
jQuery(window).scroll(function() {
    var currentPos = jQuery(this).scrollTop();
    if (currentPos > startPos) {
        if (jQuery(window).scrollTop() >= 135) {
            jQuery("#header").css("top", "-135px");
        }
    } else {
        jQuery("#header").css("top", 0 + "px");
    }
    startPos = currentPos;
});

「135」という数値はヘッダーの高さとなります。

footer-insert.php

子テーマの「footer-insert.php」に下記の記述をします。

<?php if(!is_mobile()): ?>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/slide-header.js"></script>
<?php endif; ?>

「!is_mobile」により、PCにのみ「slide-header.js」が読み込まれます。

css

style.css

子テーマの「style.css」に下記のスタイルを記述をしました。

#header {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0;
    transition: 0.3s;
    background: #FFF;
}

#navi {
    margin-top: 135px;
}

「transition: 0.3s;」でヘッダーのスライドをある程度滑らかにしています。「margin-top: 135px;」でメニューの位置を調整しています。

mobile.css

子テーマの「mobile.css」に下記のスタイルを記述しました。

#header {
    position: static;
    z-index: auto;
    top: auto;
    left: auto;
    width: auto;
    padding: 0;
    transition: none;
    background: none;
}

#navi {
    margin-top: 0;
}

「style.css」で記述したスタイルはモバイルの方にも影響があるので、打ち消す記述をします。

動作確認

画像を押下すると動画が表示されます。

ページ途中で上にスクロールすると、ヘッダーがスライドで表示され、固定されます。

まとめ

ヘッダー固定、非表示用の「slide-header.js」を作り、子テーマの「footer-insert.php」に読み込ませる。
ヘッダー固定、メニュー位置調整用のスタイルを作り、子テーマの「style.css」に記述する。
モバイル表示の影響を防ぐために「mobile.css」に打ち消す記述をする。

ヘッダーはスクロール時に完全に固定しようかどうか迷ったのですが、記事を読むときにずっと画面領域が占有されるのが気になり、モバイルと同じ動きにしました。

ヘッダーを半固定化したメリットとしては、訪問ユーザーにとってはサイト名のクリックである程度トップページへの遷移が任意にできること、運営者にとってはSNSボタンでフォロー率が多少アップすることの2点になります。

メニューも一緒に半固定化しようと思ったのですが、メニューまで含めると半固定とはいえ、画面領域が結構な範囲で占有されてしまうので見送りました。

ヘッダーとメニューの役割について再考させられた実装でした。