Webレスポンシブウェブデザインでのサイト作成中に、今回僕がハマったことの備忘録です。「position:fixedでアンカーリンクがずれる」といった似たような問題と解決策の記事はたくさんあったのですが、僕のケースではそれだけでは解決しなかったので、同じような問題でハマって困ってる方の参考になれればいいなと思います。▼とっととデモ見せやがれっていう方はこちらページの途中から固定ナビゲーションへ切り替えた時にページ内リンクがずれる問題を解決したデモやりたかったこと1ページ完結のサイト構成PC、タブレット、スマホでヘッダー(ロゴ)の高さが変わる指定した距離をスクロールすると、上部に固定するナビゲーションを表示(ロゴは消える)ナビゲーションをクリック(タップ)すると、同じページ内の指定した場所へアンカーリンクぶつかった問題点スクロールする前(サイトが表示されたばかりの状態)でのアンカーリンクと、一定のスクロール後、ヘッダー(ロゴ)が消えてナビゲーションだけが固定された状態でのアンカーリンクとでは、同じアンカーリンクでも表示場所にズレが生じる。日本語は難しい・・・。!最初はヘッダーを固定していない状態でアンカーリンクを押すと、途中で固定ナビゲーションが表示されるので、その分の高さだけずれるという問題です。レスポンシブデザインなので高さが可変でガチ指定できないというところがポイントです。いう固定する為のcssを付与」されるスクリプトを書きました。});次に、最初からずっと同じ高さで固定されているヘッダーの場合は、以下のようなスクリプトとCSSで回避できますので書いておきます。padding-top:100px;}しかし今回のように途中から固定ヘッダーに切り替わる場合はこれだけでは直りません。何度も言いますが、直らない理由は、固定ナビゲーションが、最初から固定されているわけではなく、途中から固定されるからです。言葉で説明するのは難しいし、伝わりづらいので、こちらのキャプチャをご覧ください。固定される前の状態からアンカーリンクを押すと、スルスルっと遷移している途中で固定ナビゲーションが出現してしまい、アンカーリンクがずれたように見えるので、先ほどのスクリプトに以下の条件分岐を追記してスクロール位置をずらします。false;});このスクリプトに修正します。できた!(*゚∀゚)これで意図した通りの動きが実現できました。伝わりましたかね??(・ω・。