_s(Underscores)でヘッダーナビゲーションとバーガーメニューの仲を取り持とう
前回の「_s(Underscores)にバーガーメニューを付けてみよう」の続きです。
「_s(Underscores)でヘッダーナビゲーションに凝ってみる」
のヘッダーナビゲーションと組み合わさったことによって、
画面をスクロールしてヘッダーは縮んでいるのに、
バーガーメニューが取り残されるという少し間抜けな状態になりました。
「_s(Underscores)でヘッダーナビゲーションに凝ってみる」
の「header-navi.js」を少し応用して、以下のように追記してみました。
ハイライトが追記した箇所です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
jQuery(function($){ var _window = $(window), _header = $('.site-header'), <em> _resmenu = $('#responsive-menu-button'),</em> heroBottom; _window.on('scroll',function(){ heroBottom = $('.hero').height(); if(_window.scrollTop() > heroBottom){ _header.addClass('transform'); <em> _resmenu.addClass('transform');</em> } else{ _header.removeClass('transform'); <em> _resmenu.removeClass('transform');</em> } }); _window.trigger('scroll'); }); |
一定以上スクロールしたり、戻したりすると、
バーガーメニューボタンのクラスに「transform」が追記されたり、
削除されたりするようになっています。
続いて、「style.css」に以下の追記をしました。
バーガーメニューボタンのクラスに「transform」が追加・削除されることで、
トップからの位置が変動する(48⇄8)という記述になります。
1 2 3 4 5 6 7 8 9 10 |
/* デフォルトのバーガーメニューの位置 */ #responsive-menu-button { transition: .5s!important; top: 48px; } /* 画面スクロール後のバーガーメニューの位置 */ #responsive-menu-button.transform { top: 8px; } |
transitionに「!important」が付いているのは、
プラグインの「Responsive Menu」のCSSと競合してしまったので、
仕方なく強制的に適用させました。
「!important」を使うのはあまり美しくないし、
負けた感があるので、キライなんですけど…
さて、ここではすんなり書いてますが、
実は書いてから動くまで、2〜3時間ハマってました。
完全に行き詰まって、数時間寝かせたら動くようになったっていう…
えーえーきっとブラウザのキャッシュとかでしょーよ。
知識が足らなくて探り探りやっている時ほど、
単純なミスに気付かないんですよね。
なぜかって自分の記述に自信がないから。
先に「やり方が間違ってるんだ」って思っちゃうんですねぇ。
きっと。
日々精進ですw