_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