doors doors

【CSS・Javascript・Luxy.js】position:fixedの中でアンカーリンクが効くようにする

  • HOME
  • TRY
  • 【CSS・Javascript・Luxy.js】position:fixedの中でアンカーリンクが効くようにする

【CSS・Javascript・Luxy.js】position:fixedの中でアンカーリンクが効くようにする

以前書いた東京・名古屋側のブログにて、Luxy.jsのアンカーリンクが効かない件についてのお問い合わせをいただきました。
記事の内容に興味を持ってくださり誠にありがとうございます。

確かに以前書いた記事の内容ですとざっくりすぎましたので、
お問い合わせ内容について理由と共にこちらで回答させていただければと思います。

こちらは以前書いた記事になります↓

【parallax】IEでも綺麗に動くパララックスを探してみた

Luxy.jsは画面の全てを支配します。
故にスクロールしてアクティブになっていくアンカーリンクは工夫をしない限り効きません。
注意です。

(上記記事より抜粋)

Luxy.jsとは……慣性スクロールができるようになるjsプラグインです。

Luxy.js

なぜLuxy.jsではアンカーリンクが効かないのか?

Luxy.jsが指定のコンテンツをfixedとし、画面がスクロールすることに伴ってその指定コンテンツをゆるゆると動かしているという仕組みです。(かなりざっくり)

そしてアンカーリンクが効かない原因はこの「コンテンツ全体をposition : fixed;で囲んでいるから」になります。
Luxy.jsがどうとかというお話ではなく、fixed自体がスクロールしても同じ位置に固定されていることが関係しています。

以下はluxy.jsを想定したHTMLとCSSだけの内容です。

See the Pen luxy.js & anchor link by casyan (@d-casyan) on CodePen.

これを見てもわかる通り、fixedはfixedの中身の長さがどうであれ画面に対する固定なのでそもそもスクロールが出現しません。
またfixedでない箇所にはコンテンツがないわけですので、画面の高さもありません。

これはスタック文脈という要素の重なりが大きく関係しています。
「ルート文脈」「スタック文脈」のお話はまた今度させていただければと思います。

こちら動いていないように見えますが全くもってこれは正常な動きです。
(普通に作って出したら失敗作ですけど)

Luxy.jsを使用しなくてもfixedを使用してアンカーリンクを飛ばす場面というのは必ず出て来ますのでぜひ続きもご覧になってください。

どうやってfixedにアンカーリンクを効かせるのか

またまたざっくりと答えますと「コンテンツの位置を取得できれば良い」です。
Javascriptならこれが可能です。

以下はjQueryでアンカーリンクと、コンテンツの場所を見に来たらナビゲーションにclassが付くというものです。

こちらと組み合わせて使用してみましょう。

ここでまた注意なのが、
Luxy.jsで指定したコンテンツそのものがfixedとなり、慣性スクロールになるので、
アンカーリンクそのものを慣性させたくない場合はLuxy.jsで指定したコンテンツより外側に置いてfixedとする必要があります。

できあがったものがこちらになります。

DEMO PAGE

Luxy.jsを使用しながらもアンカーリンクが働いていることがわかると思います。
これはoffset()などで座標を読み取っているので、単純なアンカーリンクの動きとは違い、数値を示してそこへ飛ばしているということになります。
さらに慣性でゆるっと座標をプラスしたりマイナスしたりもされますので、飛ぶ先へ50px〜100pxを増減させておいてください。

まとめ

今回はかなりざっくりと書きましたが、fixedやjavascriptの設定方法についてはもっと深いお話がたくさんあります。
アニメーションが増えて来た近年、CSSのpositionや、javascriptの座標取得とは仲良くなっておきたいですね!

参考ページ

関連記事

【CSS】比率指定にも使える!heightとpadding、marginの計算方法

前回、calc計算で100vwを基準にすれば画像や要素の比率が維持できるというお話をしました。 要素のアスペクト比(縦横比)を維持する方法 しかしPCとなると話...

WEBデザイン|PhotoshopかIllustratorか…

WEBデザインをするならPSかAIか、という問題(その後・・・) アプリケーションに慣れているかということが最大の要因になると思いますが、Illustrator...

nth-child, nth-of-type(擬似クラス)が反応しない

nth-child, nth-of-type を知る nth(疑似クラス)は知っていると便利ですが、検索などで出てくる情報サイトは、基本が分かっている前提が多い...

WEB:企業サイト、PRサイト、ランディングページ、バナー制作やCMS構築、モーショングラフィックス、VP、動画制作、パンフレット、ポスター、チラシ、DMなど制作から印刷・納品まで。 お気軽にお問い合わせください。

Illustrator|3Dとマテリアル

イラストレータの3Dが復活! しかもパワーアップして戻ってきました!  バージョ...

Dreamweaver|ライブラリのリンク

状況 Dreamweaverのライブラリを使用する場合で、トップページ(inde...

Brackets|サポート終了からその後・・・

Brackets|サポート終了からその後 結論からお伝えすると、今は「Brack...

Brackets|サポート終了

Brackets|突然、告げられるサポート終了 参りました・・・2021年9月を...