スティッキーヘッダーの背後でアンカーリンクのスクロールを防止するための1行のCSS

:target:before {
  content: "";
  display: block;
  height: var(--header-height); /* スティッキーヘッダーの高さに合わせて調整 */
  margin-top: -var(--header-height); /* スティッキーヘッダーの高さに合わせて調整 */
}

このCSSコードでは、:target:before セレクタを使用して、アンカーリンクのターゲット要素の前に疑似要素を作成します。content 属性に空の値を指定して要素を表示し、display: block を設定して要素をブロックレベルにします。さらに、height プロパティと margin-top プロパティを使用して、スティッキーヘッダーの高さに合わせて要素のサイズと位置を調整します。

この方法を使用することで、アンカーリンクをクリックしたときにスティッキーヘッダーの背後にスクロールされ、リンク先のセクションが適切に表示されます。

上記のコード例は一般的なケースに対応していますが、実際のウェブページに適用する際には、var(--header-height) の値を実際のスティッキーヘッダーの高さに合わせて変更する必要があります。

以上が、スティッキーヘッダーの背後でアンカーリンクのスクロールを防止するためのシンプルで簡単な方法です。この方法を使用すると、ユーザーがアンカーリンクをクリックしたときにスティッキーヘッダーによって隠されることなく、正確な位置にスクロールされるようになります。