固定ヘッダー時の悩み「アンカーリンクの位置調整」を、超シンプルに簡単指定するjQuery

jQueryでヘッダー固定時のアンカーリンクの位置調整

こんにちは!

サクッとお手軽・簡単に「PCとスマホなどモバイルデバイスとの間で、「padding-top」付与によってページ内リンクの固定ヘッダー分を位置調整(空き量調整)」するためのjs(jQuery)です。

PCでは「ヘッダー固定」、スマホなど「モバイルデバイスではヘッダー固定解除/ヘッダーの高さが異なる」などといった切り替え時の「アンカーリンク位置調整」に便利です。

アンカー用idを設置したHTMLタグに「padding-top: 00px;」を後付けで付与するjs

基本、骨格となるのは、アンカー(ページ内リンクの飛び先)用の「id(#xx)」を付けたHTMLタグ(section、div、hなど)に、jsで「padding-topを付与してしまおう!」という部分。

赤文字にした箇所、#aaとか#bbという部分がアンカー用のid(複数あるのでカンマ(,)区切り。その後ろの’padding-top’に続く数字が、付与したいpadding-topの値、単位は「px」です。

ちなみに赤文字部分は、アンカーidや必要なサイズによって書き換えが必要となる箇所です。

基本となるjs

js【全デバイス(ウインドウサイズ)で動作】
$('#aa, #bb, #cc, #dd').css('padding-top', 110);

しかしこのままでは、全てのウインドウサイズにおいて適用されてしまいます。PCもタブレットもスマホも何もかもに。

見ばえ、デザイン的に問題なければこれだけでも「用が足りてしまう」わけですが、きっとそうはいきませんよね。固定ヘッダーを解除したモバイルデバイスでは、〝変な空き〟が目立ってしまっているはずです。

そこで、ウインドウサイズによる分岐の出番です。

ウインドウサイズの指定方法としては「max-width」「min-width」などがあります。話がややこしくなるので詳しくは記しませんが、都合に合わせて使い分けると良いと思います。

ウインドウサイズによる分岐を加えたjs

js【ウインドウサイズ768pxで分岐の例】
if (window.matchMedia( "(max-width: 768px)" ).matches) {
	$('#aa, #bb, #cc, #dd').css('padding-top', 0);// ウインドウ幅768px以下の場合
} else {
	$('#aa, #bb, #cc, #dd').css('padding-top', 110);// ウインドウ幅768px以上の場合
}

いわゆる「if-else文」ですね。

上記の場合は、「もし(if)ウインドウサイズが768px以下のときはpadding-top: 0px;にせよ。さもなくば(else)(ウインドウサイズが768px以上のときは)、padding-top: 110px;とせよ!」という〝お達し(命令)〟です。

おそらくこれで「固定ヘッダー時のアンカーリンクのズレ」、つまり「ページ内リンクで本文が固定ヘッダーの下に隠れてしまう場合の位置調整」と、ウインドウサイズによる分岐ができているはずです!

「動作してくれない」という場合は

もしも思った通りに「動作してくれない」ような場合は、何らかの記述ミス、他のjsとのバッティングなどが疑われます。

そうした部分を探ってもそれらしい原因が見つからない場合は、もしかしたら〝深追いし過ぎず〟に、他の方法(CSSでの調整など)に切り替えたほうが、時間の節約になるかもしれません。

…なんて、なんとも無責任で恐縮です。。

固定ヘッダーに本文が隠れる状況を回避するひとつの方法として

ジブン個人的には好みではないのですが、「ヘッダー、メインナビゲーション部分を固定にしたい」というオーダーには、けっこう出くわします。

そうした場合の選択肢としては、

  1. 固定ヘッダーにしても不都合が生じず、見ばえも悪くならない設計(デザイン)にする
  2. CSSで何とかする
  3. jsで何とかする

といった方法が考えられます。

最初から「ヘッダー固定」とわかっていれば、上記の「1.」から順に検討・実装作業をしていけば良いわけですが、仕事となると、ときにはそうもいかない事態に陥ったりするものです。

たとえば、その案件に関わる誰もが抗うことのできない「天の声」が降ってきたり、作業も終盤を迎えた頃に「ダメ出し」が発動されたり…。で、「ヘッダーは固定に」「モバイルでは解除でね」などと。。

こうした天の声についてほじくると、全く違う記事となるのでやめておきましょう。

ジブンの場合はそのような場面に出くわしてしまったとき、とりあえず「こんな感じですかね」的な確認用に、今回記したjs(jQuery)を用いてきた経験が多いような気がします。

インスタントに素早く、サクッと調整して見せるのに便利かも

とにかく、急ぎ「ヘッダー固定にしましたよ」「ページ内リンク(アンカーリンク)を辿っても、本文の表示位置はバッチリですよ」「もちろん、モバイルデバイスではヘッダー固定解除です」と。

そのうえで、必要充分な作業時間が残されていればCSSでのレイアウト調整、アンカーリンクの位置ずれ調整を検討します。サイト内各ページでの整合性というか、レイアウト意図の一貫性を保ちやすいと思いますので。

しかし、たいていの場合は、CSS調整では細かな不都合が生じそうな可能性があったり、HTMLに遡る調整が必要となったり、見せ方が異なるページがある場合の調整がとてつもなく大変そうだったり…。

あるいは、リニューアル案件や引き継ぎ案件でありがちなのですが、元になるHTMLとCSSは他の人が書いたもので、一定の記述ルールを見出し難い場合は特に、ジブンにとっては〝暗号同然に見えてしまう…〟状況だったり。

そんなときは潔く?、今回記したjsのままで行きましょう!

しかし、ごく稀にですが「js禁止」という案件があったりします。そうした場合もまた潔く、「充分な時間があれば調整できますが、今は(この段階では)ムリです」「後の更新時に調整しましょう」と伝えるしかないですよね。

ウインドウサイズでの分岐にあれこれ応用可能

ともあれ、今回記したjs(jQuery)はほかにも、実行させるコードを変更することで、さまざまな場面(ウインドウサイズによる分岐)に応用可能。

しかも、なんというお手軽さ!

…とわかっているはずなのですが、なぜだかこうした応用・例外作業に出くわすたびに解決策を検索しまくり、余計な手間と時間を浪費してしまうという。。低スペック過ぎるわが脳みそ…

そんなジブンにサヨナラするための〝メモ投稿〟と〝ちょっと愚痴〟でした。。

現場からは以上です。

コメントを残す

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