固定ヘッダの高さ分、スクロール位置をずらす（HTML/CSS）

前書き

固定ヘッダの高さ分、スクロール位置をずらす方法を掲載しています。

目次

1. HTML/CSS

HTML/CSS

<div class="adjust">
  <div class="adjust_inner" id="target"></div>
</div>
<div class="target"></div>

.adjust{
  position: relative;
  z-index: -1;
}
.adjust_inner{
  position: absolute;
  bottom:0;
  padding: 30px 0 0;/* 固定ヘッダの高さ */
}

関連記事

GSAP ScrollTriggerを使う（HTML/JS）

Intersection Observer APIを使う（JavaScript）