CSSだけでヘッダー追従スクロールさせるサンプルコード

2018年7月14日2019年6月12日CSS,CSSデザイン

CSSだけでヘッダー追従する動作サンプル

See the Pen CSS Header following by yochans (@yochans) on CodePen.

CSSだけでヘッダー追従するサンプルコード

HTML

<div id="header">CSSだけでヘッダー追従スクロールさせるサンプルコード</div>

CSS

#header{
  position: sticky;
  top: 0;
  z-index:2;
  padding:5px;
  background: #000;
}

「position: sticky;」を設定された要素はtopで指定したポジションに到達後、その位置で貼り付きます

サンプルでは最初から最上部にありますが、ヘッダー下のメニューに指定した場合、画面トップに到達後、その位置に固定されます