Xeory Extensionをカスタマイズ！ナビゲーションメニューをスクロールすると上部に固定

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function($) {
    $(function() {
        var $header = $('#header');
        $(window).scroll(function() {
            if ($(window).scrollTop() > 50) {
                $header.addClass('fixed');
            } else {
                $header.removeClass('fixed');
            }
        });
    });
})(jQuery);
</script>

そしてfixedに対してcssで動きを付けたり幅を狭めたりするというわけです。

ひとつひとつちゃんと見てみようと、見本サイトを見ると、htmlの構造はとてもシンプル。
でもXeoryのヘッダー部って、

<header id="header">
   <div class="wrap">
      <h1 id="logo">
      <div id="header-right">
          <nav id="gnav">
              <div id="gnav-container">
                  <ul id="gnav-ul">

このように、マトリョーシカのように何層にも入れ子になっているんです。
こんなに・・・いるのかな・・・。

fixedというクラス名は、どの要素につけたらいいの？
まぁ普通に考えたら一番外側のheaderでしょうね。

それはわかったんだけど、#header.fixedに対してcssで装飾を加えても、動きがtransitionで与えてる指示通りに動かない！
それに部分的に動いたり動かなかったりしてる。

冷静に考えればわかったことなんだけど、なんか頭が混乱してきて、

そもそもjqueryの記述が間違ってるんじゃないかとか
fixedをheader以外の全部のタグに書かなきゃいけないんじゃないかとか
でもそうするとノーマル状態のheader部にまで影響を与えてしまうとか
それならjqueryをすべての要素に対して書かなきゃいけないの？？とか

謎が深まるばかりになってきたので、中田さんに教えてもらいました！

中田さんについては、こちらの記事で紹介しています♪
[kanren postid=”2641″]

中田さんは一瞬で解決してくれましたｗ

一番外側の要素に与えた指示は中の要素にも効くので、中がどんなに複雑になっていたとしても、一番外側のheaderにfixedを付ければいいのだと！！

そうだった！
箱にいろいろ入れたら、その箱を動かすと中のものも一緒に移動する。
そういう仕組みをすっかり忘れてた！

だからbodyタグにフォントのサイズやフォントファミリー、その他の一般的な設定をするんだよね。
その中でなにか指示されると、そっちが優先されるけど。

というわけで、cssにはこのように記述したらいいんです。

/* transition （急にデザインを変えるのではなく、ふわっと移動させる）*/
#header,
#header:after,
#header .logo,
#gnav ul li,
#gnav ul li a {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

/* Fixed */
#header.fixed {
   background: rgba(65,186,164);
   position: fixed;
   top: 0;
   z-index: 10000;
   width: 100%;
}

#header.fixed #logo {
    font-size: 22px;
    color: #333;
    padding-top: 0px;
}

#header.fixed:after {
    margin-top: px;
    padding-top: 0px;
   width: 100%;
}
#header.fixed #gnav ul li a {
    padding: 0 20px;
    padding-top: 0px;
   width: 100%;
   background: rgba(65,186,164,0);
}
#header-right.fixed {
    height: 50px;
}

transition （移動させるアニメーションのタグ）を適用させたいのはheaderのなかのほぼすべての要素。
だから必要なもの全部をまとめて書きます。

さらに、指示を与えたいすべての要素にheader.fixedをつけ、指示を与えます。

それでOK。

あと、今回中田さんから教えてもらってビックリしたのは
cssってあとから書いたものが優先されるんだけど
その前に書かれたcssの記述に間違いがあったら、そこで読み込むのをやめてしまうことがあるんだとか。
だから、もしcssが効かない！ってことがあったら、それ以前のコードをチェックすることも必要なわけです。

こういうのって本とかサイトとかに載ってないので、聞けてよかった！
困ったとき、必ず解決に導いてくれる、そんな人に私もなりたい（笑）