_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

シェアする

コメントを残す

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

コメントする