Blog スタッフブログ

WEB制作

CSSだけでコンテンツを画面固定する方法

コーダーのkです。

ページの途中からブロックを追従させる処理をjavascriptを使わずにCSSだけで実現する方法をご紹介します。

このようなレイアウトでサイドを追従させたい時を例にします。

準備

まず通常の２カラムデザインになるように構築します。

CSSのflex使用します。

<html>
  <head>
  </head>
  <body>
    <header>
    </header>
    <main>
      <div class="main">
        <p>ここにメインコンテンツ</p>
      </div>
      <div class="side">
        <!--この部分を追従させたい-->
      </div>
    </main>
    <footer>
    </footer>
  </body>
</html>
main{
  display: dlex;
}
.main{
  width: 75%;
}
.sub{
  width: 25%;
}

position: sticky;で固定

CSSのpositionプロパティのstickyを利用します。

.sub{
  width: 25%;

  position: sticky;
  top: 50px; //画面の上から何pxの位置で追従。
}

sticky単体では動きません。

top: 50px; のようにどの地点で追従させるかがセットで必要です。

.subがウィンドウの50pxの位置から追従するようになります。

戻る一覧へ戻る