【簡単】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で画面が真っ白になってしまった時の対処方法
突然画面が真っ白になって、何度試してもページが表示されなくて気分がブルーになってしまった時に試した方法 今回は、テーマの中にあるfunction.phpを編集 …