cssのis-fixedが適用されない件につきまして

Question

<!--ここからナビゲーション-->
      <div class="nav-wrapper">
        <div class="menu">
      <nav>
        <ul>
          <li><a href="#header">Top</a></li>
          <li><a href="#system_contents">System</a></li>
          <li><a href="#staff_contents">Staff</a></li>
          <li><a href="#access_contents">Access</a></li>
          <li><a href="#recruit_contents">Recruit</a></li>
        </ul>
      </nav>
    </div>
    </div>
  <!--ここまでナビゲーション-->

CSS↓
/*ここからナビゲーション*/
.nav-wrapper { /* .navの高さ分確保用 */
    height: 40px;}
.menu{
  width: 980px;
  margin: 0 auto;
}
.menu .is-fixed {
    position: fixed;}

 .menu::after{//フロート解除用クリアフィックス
  content: "";
  clear: both;
  display: block;
}


.menu li {
  font-size: 15px;
  font-weight: bold;
  width: 196px;
  display:block;
  line-height:40px;
  height:40px;
  text-align:center;
  float: left;
}

.menu a{
  display:block;
  line-height:40px;
  height:40px;
  text-align:center;
  text-decoration: none;
  background: linear-gradient( 180deg, rgb(252, 200, 98) ,rgb(226, 162, 67) , rgb( 255, 255, 255) ,rgb(226, 162, 67),rgb(252, 200, 98) );
  color:#000;

}

ヘッダーの下のナビの追従cssのis-fixedを適用したら
うまく適用できずブラウザに反映されませんでした。
調べてみたのですが、原因が分かりません。
ご教授いただけますでしょうか？

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[wpmanaby]

修正いたしました。

[yoshinavi]

どのように反映されないのでしょうか？求めるカタチと現状を記述されると良いかと思います。

[kei344]

is-fixedはなんらかのプラグインで付与されるのでしょうか。プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）また、ライブラリ呼び出し部分のコードと検証されている端末の種類（OS/ブラウザ）も提示されてはいかがでしょうか。

[wpmanaby]

スクロールしたときにナビゲーションバーが追従するようにしたいのですが、現時点ではスクロールしても追従されません。

[wpmanaby]

OSはWindows10、ブラウザはchromeです。

[wpmanaby]

プラグインは使用しておりません。

[yoshinavi]

位置の指定が無いので入れてみてはどうですか？

[kei344]

ではis-fixedをどうやって付与しているのでしょうか。その部分を提示してください。

[yoshinavi]

任意の位置に来た時に固定であれば「css position sticky」で検索してみてください。

[wpmanaby]

承知しました。

Answer 1

wpmanabyさんのサンプルコードを見ると、

間違えているところは .menu .is-fixed。 同じdomに二つのクラスを繋げたかったら、classの間のスペースが要らない。

下記のコードにしたら、ちゃんとfixedされてます。

.menu{
  width: 980px;
  margin: 0 auto;
}
.menu.is-fixed {
    position: fixed;
    left:50%;
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -o-transform:translateX(-50%);
}

＊leftとtransform:translateを追加しないと、メニューは左側にfixedされてしまいます。

下記のサンプルは綺麗に表示するために、.menu li {のwidthは20%に変更しました。

http://study.jeromedupuis.net/teratail/135708/

:)