(日本語) Twenty Thirteen ナビゲーションメニューを固定

Comment

1. 投稿者様
   こちらの記事についてもう少し詳しく教えていただきたいです。

   当方twenty thirteen 1.2のテーマにて記事のようにナビメニューを固定したいと考え、記事を参考に当サイトに反映させてみましたが、実装できておりません。（記事内容を反映させても変わらない）

   １．header.phpの内にjavascriptのロジックを追加
   ２．nav要素のidを変更
   ３．.navbar-fixed-topの追加

   以上の設定を行ないましたが、他になにか考えられる点などあるのでしょうか。
   思い当たる点がありましたら、ご教授お願いしたいと思います。

   Reply

   • コメントありがとうございます。
     以下のコードで試してみ下さい。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は参照してないようですね。
     この度は親身になって対応していただき、感謝しております。
     ありがとうございました。

2. WordPress | Twenty Thirteen ナビゲーションメニューを固定 | Think deeply, Do less, More effective http://bit.ly/1fSSSzM

   Reply

Leave a Reply to @wJSnews Cancel reply

Your email address will not be published. Required fields are marked *

Comment

Name *

Email *

Website

Save my name, email, and website in this browser for the next time I comment.

CAPTCHA Code *

Δ

This site uses Akismet to reduce spam. Learn how your comment data is processed.