Twenty Thirteen ナビゲーションメニューを固定
ナビゲーションメニューを固定にしてみました。下方にスクロールしても最上部に固定されるやつです。
スクリプト
以下のjsファイルを用意して下さい。
nav要素のidは、ソースもしくはheader.phpの<nav id="~">をみて確認して下さい。
// navbarfixedtop.js
<script type="text/javascript">
$(function () {
var nav = $('#navbar'); // nav要素のidを設定
var objDistance = nav.offset().top;
$(window).scroll(function() {
var myDistance = $(window).scrollTop();
if (myDistance > objDistance){
nav.addClass('navbar-fixed-top');
}
if (objDistance > myDistance){
nav.removeClass('navbar-fixed-top');
}
});
});
</script>
header.phpのhead内もしくはfooter.php(wp_footer()の前あたり)にそのまま追加するか、もしくはフックして読み込ませて下さい。
フックする場合
/子テーマディレクトリ/js/navbarfixedtop.jsと配置した例です。
(参考：独自のCSSやJSを読み込む)
// functions.php
add_action( 'wp_enqueue_scripts', 'navbarfixedtop');
function navbarfixedtop() {
wp_enqueue_script( 'navbarfixedtop', get_bloginfo('stylesheet_directory') . '/js/navbarfixedtop.js', array(), null, true);
}
スタイル
画面の最上部にAdmin bar(管理バー)を表示している場合は、admin-barもしくはlogged-inを利用してずらして下さい。
<style>
.navbar-fixed-top {
top: 0;
position: fixed;
z-index: 1030;
}
body.admin-bar .navbar-fixed-top {
top: 28px;
}
</style>
ちなみに、スクリプト内のnav要素のidさえ適切に設定すれば、テーマに関係なく使用できます。
関連記事
-
-
Twenty Twelve サイトタイトルをテキストから画像に置き換え
ページトップに表示されるサイトタイトルをデフォルトのテキストから画像に変更します。 あらかじめ、管理画面のメディアライブラリから画像をアップロードしているもしくは別の場所に保存しているそのファイルの
-
-
Twenty Twelve 投稿者情報を表示/非表示に
TwentyTwelveでは、投稿ページごとに投稿者の情報を掲載することができます。他のテーマでも同様だと思います。こんな感じです。ここでは、掲載と削除の方法について記載します。 表示方法 「
-
-
プラグイン関連のJSやCSSの読み込みをフィルター
プラグインをインストールしていくとheadやfooter内がCSSやJSで溢れていきます。できるだけ、自分で書けるものに関しては、余計なコールが少なくなるので可能な場合はそうしていますが(そうもいかず
-
-
管理画面のCSSをカスタマイズ
管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな
-
-
「カレンダー」ウィジェット カスタマイズ・プラグイン
目次 カレンダー移動をajax遷移させるようにする 営業日・休業日を色分けして表示 ページやウィジェットにgoogleカレンダーを追加 カレンダーウィジェットをajax遷移させるよ
-
-
アイキャッチにマウスオーバーすると投稿タイトルを表示
WordPressのフォーラムから定期的に流入があるため、対応をいくつか探ってみました。トピックは、「サムネイルにマウスオーバーするとタイトルが表示されるようにしたい」 ちなみに、投稿内のキャプ
-
-
投稿タイトルのtitle属性を削除など Twenty Twelve 1.2での変更点
TwentyTwelveが1.1から1.2にアップデートされたので、いくつか変更点を洗ってみました。 (*全てを網羅しているわけではありません) 全ての変更部分は、こちらに記載されています。
-
-
Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」
Prettify Code Syntaxは、WordPressでGoogle Code Prettifyを使用してソースコードを表示してくれるプラグインです。 プラグインダウンロード Google
-
-
head内に出力される要素を整理
Wordpressを使用していくうちに、head内がカオスな状態になっていくきますよね。そこで、そういう状態になったものをスッキリさせていこうという試みをやっていこうと思います。 削除方法 取り急
-
-
Twenty Thirteen テーマ用フォント "Source Sans Pro" / "Bitter"の使用を止
TwentyThirteenでは、テーマ用のフォントとして「Source Sans Pro」と「Bitter」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどの
- PREV
- ハッシュ関数の選択とハッシュ化処理
- NEXT
- DELL純正マウスを求めて秋葉原へ
Comment
投稿者様
こちらの記事についてもう少し詳しく教えていただきたいです。
当方twenty thirteen 1.2のテーマにて記事のようにナビメニューを固定したいと考え、記事を参考に当サイトに反映させてみましたが、実装できておりません。（記事内容を反映させても変わらない）
１．header.phpの内にjavascriptのロジックを追加
２．nav要素のidを変更
３．.navbar-fixed-topの追加
以上の設定を行ないましたが、他になにか考えられる点などあるのでしょうか。
思い当たる点がありましたら、ご教授お願いしたいと思います。
コメントありがとうございます。
以下のコードで試してみ下さい。WordPressバンドルのjQuery用を使用する場合は、1行目と最終行が以下のようになります。(抜けていました、スイマセン)
<script type="text/javascript"> (function($) { var nav = $('#navbar'); // nav要素のidを設定 var objDistance = nav.offset().top; $(window).scroll(function() { var myDistance = $(window).scrollTop(); if (myDistance > objDistance){ nav.addClass('navbar-fixed-top'); } if (objDistance > myDistance){ nav.removeClass('navbar-fixed-top'); } }); })(jQuery); </script>以下のようにGoogleなど外部のjQueryライブラリを使用する場合は、投稿内のコードを採用して下さい。jQueryをCDNから読み込む
"２．nav要素のidを変更"については、Twenty Thirteenの場合は変更なしで上記コードのままでも問題ないかと思います。
kwski様
返信ありがとうございます。nav id要素はそのままで早速試してみましたが、現象は変わらずです。。。。当方サイトは外部のライブラリを使用せずの対応で行なっているため、特にjQueryの外部サイトは記述しておりません。
当方でもいろいろと試しながらやってみます。
投稿者様においても何か他に思い当たる点がありましたら、ご連絡いただければ幸いです。
kwski様
IEでデバックしスクリプトエラーを確認しましたので、続報としてご連絡します。
スクリプト内の
「var objDistance = nav.offset().top;」にて
エラー
「未定義または null 参照のプロパティ 'top' は取得できません」が
表示されてしまい、正常に動作できないようです。
当方にても追って確認していきます。
kwski 様
当方のサイトでの対応ですが、無事に正常に動作できました。
原因の詳細は不明ですが、コード内にjQueryを参照するよう記述したら正常に動作しました。（単純な原因でした）
wordpressのデフォルトではjQueryは参照してないようですね。
この度は親身になって対応していただき、感謝しております。
ありがとうございました。
WordPress | Twenty Thirteen ナビゲーションメニューを固定 | Think deeply, Do less, More effective http://bit.ly/1fSSSzM