上・下に固定
左が上、下が右に固定しているサンプル。ウィンドウの高さを縮めてスクロールさせると確認できる。
上に固定
使った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>
下に固定