_s（Underscores）でヘッダーナビゲーションとバーガーメニューの仲を取り持とう

前回の「_s（Underscores）にバーガーメニューを付けてみよう」の続きです。

「_s（Underscores）でヘッダーナビゲーションに凝ってみる」

のヘッダーナビゲーションと組み合わさったことによって、

画面をスクロールしてヘッダーは縮んでいるのに、

バーガーメニューが取り残されるという少し間抜けな状態になりました。

「_s（Underscores）でヘッダーナビゲーションに凝ってみる」

の「header-navi.js」を少し応用して、以下のように追記してみました。

ハイライトが追記した箇所です。

jQuery(function($){

var _window = $(window),
    _header = $('.site-header'),
    _resmenu = $('#responsive-menu-button'),
    heroBottom;

_window.on('scroll',function(){
    heroBottom = $('.hero').height();
    if(_window.scrollTop() > heroBottom){
        _header.addClass('transform');
        _resmenu.addClass('transform');
    }
    else{
        _header.removeClass('transform');
        _resmenu.removeClass('transform');
    }
});

_window.trigger('scroll');

});

一定以上スクロールしたり、戻したりすると、

バーガーメニューボタンのクラスに「transform」が追記されたり、

削除されたりするようになっています。

続いて、「style.css」に以下の追記をしました。

バーガーメニューボタンのクラスに「transform」が追加・削除されることで、

トップからの位置が変動する（48⇄8）という記述になります。

/* デフォルトのバーガーメニューの位置 */
#responsive-menu-button {
  transition: .5s!important;
  top: 48px;
}

/* 画面スクロール後のバーガーメニューの位置 */
#responsive-menu-button.transform {
  top: 8px;
}

transitionに「!important」が付いているのは、

プラグインの「Responsive Menu」のCSSと競合してしまったので、

仕方なく強制的に適用させました。

「!important」を使うのはあまり美しくないし、

負けた感があるので、キライなんですけど…

さて、ここではすんなり書いてますが、

実は書いてから動くまで、2〜3時間ハマってました。

完全に行き詰まって、数時間寝かせたら動くようになったっていう…

えーえーきっとブラウザのキャッシュとかでしょーよ。

知識が足らなくて探り探りやっている時ほど、

単純なミスに気付かないんですよね。

なぜかって自分の記述に自信がないから。

先に「やり方が間違ってるんだ」って思っちゃうんですねぇ。

きっと。

日々精進ですw