CSSだけで要素内の固定のデモ、サンプル

CSSの「position: sticky;」を利用して要素内の上・下で固定

上・下に固定

左が上、下が右に固定しているサンプル。ウィンドウの高さを縮めてスクロールさせると確認できる。

上に固定

使ったHTMLとスタイルは下記のような感じ

<style>
   .topSticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      
      background-color: #ffeeee;
   }
</style>
<div>
   <div class="topSticky">上に固定</div>
   <p>本文</p>
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>











使ったHTMLとスタイルは下記のような感じ

<style>
   .btmSticky {
      position: -webkit-sticky;
      position: sticky;
      bottom: 0;
      
      background-color: #ffeeee;
   }
</style>
<div>
   <p>本文</p>
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <div class="btmSticky">下に固定</div>
</div>











下に固定

関連項目

・css 要素内の上・下で固定