wordpress

【簡単】wordpress スクロールするとヘッダーが固定される

投稿日:2017年9月24日 更新日:

ヘッダー固定

 

①一番最初に見えるヘッダーをカスタマイズ

header.phpファイルに使っているテーマにより若干違いはありますが、下記のようなコードが記述されていると思います。


<div id="header-sample">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php echo esc_attr( get_bloginfo( 'name' ) ); ?> </a>
</div>

この部分をcssで指定していきます。

サンプルとして以下をcssに記述

#header-sample {
top: -100px;
position: absolute;
width: 100%;
margin: 100px auto 0;
padding: 0;
z-index: 999;
background-color:rgba(255,255,255,0.5);
}

【説明】
top: -100px
上から-100pxの位置にします。
position: absolute
親要素を基準に絶対的な位置を決める
width: 100%
画面横いっぱいに表示させる
そうでなければ、指定%もしくは指定pxでもかまいません
margin: 100px auto 0
top:-100pxを戻します
左右はautoで下は0にしています
padding: 0
内側の余白も0にしています
z-index: 999
表示の順番です。数字が大きいほど前面にきます
background-color:rgba(255,255,255,0.5)
ヘッダー部分の背景を白の半透明にしています。
別に半透明にしなくてもいいです
opacityプロパティは半透明にもなりますが、文字まで薄くなってしまうので使いません

 

②スクロールすると固定されるヘッダー部分をカスタマイズ

 

サンプルとして以下をcssに記述

#header-sample.fixed {
margin-top: 0;
width: 100%;
top: 0;
position: fixed;
height: auto;
background: #fff;
border-bottom: 1px solid #ddd;
transition: top 0.65s ease-in;
-webkit-transition: top 0.65s ease-in;
-moz-transition: top 0.65s ease-in;
}

【説明】
margin-top: 0
ヘッダーの上部には余白を作りません
width: 100%
画面横いっぱいに表示させる
top: 0
上から0pxの位置にします
position: fixed
absoluteと同じく絶対位置への配置になるが、画面をスクロールしたしても位置が固定されたままになる
height: auto
高さはあえて指定していません
background: #fff
背景を白色にしました
border-bottom: 1px solid #ddd
ヘッダーの下に灰色の線を付けました
スクロールしたときに他のコンテンツと区切りをつけたかったから
transition: top 0.65s ease-in
-webkit-transition: top 0.65s ease-in
-moz-transition: top 0.65s ease-in
ゆっくり現れるように効果をつけました

 

③scriptを記述

○○○.jsのように外部ファイルを用意している場合は、そちらに記述でもOKです

その時は、

<script></script>

は要りません(function($) {~でOKです

(function($) {
    $(function() {
        var $header = $('#header-sample');
        
        $(window).scroll(function() {
            if ($(window).scrollTop() > 350) {
                $header.addClass('fixed');
            } else {
                $header.removeClass('fixed');
            }
        });
        });
})(jQuery);

【説明】

(function($) {
    $(function() {
        var $header = $('どのIDもしくはクラスに適用するのか');
        
        $(window).scroll(function() {
            if ($(window).scrollTop() > どのくらいスクロールすると実行されるか) {
                $header.addClass('実行されたときにfixedのクラスを使う');
            } else {
                $header.removeClass('そうでなければfixedのクラスは使わない');
            }
        });
        });
})(jQuery);

できましたでしょうか?
あとはご自身で好きな値を入れてカスタマイズしてみてください。

 

-wordpress
-,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ワードプレス

All in One SEO Packで XMLサイトマップをGoogleに 送信する方法

  ワードプレスのプラグインで超有名な『All in One SEO Pack』ですが、必ず入れたいプラグインの1つです。 その名前の通り、SEO関係の機能が一つにまとまっているので、かなり …

画像を上下中央に配置

指定した範囲内に画像を上下中央に配置

  divなどで指定した部分に、画像を配置 上下中央にする方法は他にもありますが、 今回は、『position』を使ってみます。   html <div class=&quo …

お問い合わせ

WordPressにお問い合わせフォームを入れるならこの2つのどちらか

  お問い合わせフォームのプラグイン WordPressでWebサイトを作成していて、お問い合わせフォームを設置することがあると思いますが、そんな時はプラグインを使うと簡単に設置・導入が可能 …

ヘッダー画像変える

ヘッダー画像やスライダーをページ毎に変える方法

  WordPressで作成したページで、ヘッダー画像やスライドショーをページごとに変えたい! 今回やってみたことは、条件分岐でヘッダーの画像部分を振り分けるといった方法です。 プラグインな …

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた④

  11.メンバー一覧表示のカスタマイズ   メンバー個人個人の登録が終わったら、今度は一覧表示を作ってみます。 あまりごちゃごちゃ触りたくないので、以下のファイルだけ中身を少し変 …