[wordpress] スクロールでナビ固定。高さを変える。

スクロール

良く見かけるナビゲーションだと思いますが、スクロールするとナビゲーションがページの上部に固定(flex-top)され、ナビゲーションの高さが少し狭まる。というカスタマイズです。”[Bootstrap 4] メニューをTopに固定する ” のカスタム版といった感じです。何とか出来たので共有します。

スクロール

スクロールすると、↓の様に、背景が半透明になり、高さが狭くなります。

スクロール

前提として

基本的には、どんな状況でも実装可能なのですが、私の場合 下記の状態で行いました。

  • wordpressを使用
  • WP Bootstrap Starterフレームワーク使用
  • 準備

    headerテンプレートに、jQuaryファイルとjsファイルをリンクします。

    WP Bootstrap Starterのchildテーマ内に[js]フォルダを作り(名前は任意)、中にorigin.jsファイル(名前は任意です)を作ります。Child テーマについては、[wordpress]簡単!子テーマ作成 Child Theme Configurator に書きました。ご参照下さい。

    それらを、親のWP Bootstrap Starterテーマ内にあるheaderテンプレートをChild 内にコピーして、そこにリンクします。

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src="<?php echo get_stylesheet_directory_uri() ?>/js/origin.js"></script>

    ※ リンクは</header>より上に書くのがお約束です。

    構造

    htmlは、この様な感じになっています。

    <header>
    <nav>
    <ul>
    <li>・・・・</li>
    <li>・・・・</li>
    </ul>
    </nav>
    </header>

    jsを書く

    先程作成したorigin.jsにコードを書きます。

    $(function() {
      var $win = $(window),
          $nav = $('nav'),
          animationClass = 'is-animation';
    
      $win.on('load scroll', function() {
        var value = $(this).scrollTop();
        if ( value > 100 ) {
          $nav.addClass(animationClass);
        } else {
          $nav.removeClass(animationClass);
        }
      });
    });

    スクロールした時に、navにanimationClass をclassとして付け、スクロールを戻す(Topに戻る)とそのclassは消える様になっています。つまり、CSSで.animationClassにしたい事を書けば、スクロールした時にだけ、その様になると言う訳です。

    CSSを書く

    今回は、WP Bootstrap Starterフレームワークの、紫色のナビゲーションを白くして、スクロールした際、その白を透過させ、ページ上部に固定する際、ナビゲーションの高さを、アニメーションでスムーズに低くしようと思います。

    header#masthead {	
      background-color:rgba(255,255,254,0.9);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      transition: .4s;
    }
    nav{margin-top:10px;margin-bottom:10px;}
    
    .is-animation {
    margin-top:0;margin-bottom:0;
    transition: .4s;
    }

    上下のmarginを先程のjsで設定した様に、値を10pxにしたり0pxにしたりする事で高さを調整しています。transitionはスムーズに高さを変える為の設定です。

    #mastheadは、WP Bootstrap Starterフレームワークで使用されている idです。

    コンテンツがナビゲーションと重なる場合は、bodyの高さを足します。

    body { 
        padding-top: 4.5rem;
    }

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください