W3School TIY Editor
W3CSTUDY オンライン チュートリアル
方向を変更
ダーク モード
コードの実行
<!DOCTYPE html> <html> <head> <style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50; } </style> </head> <body> <p>このフレーム内でページを<b>スクロール</b>して、固定配置の仕組みを理解してください。 </p> <div class="sticky">ベタベタしてます！ </div> <div style="padding-bottom:2000px"> <p>この例では、要素のスクロール位置に到達すると、スティッキー要素はページの上部 (top: 0) に留まります。 </p> <p>上にスクロールしてベタつきを取り除きます。 </p> <p>スクロールを可能にするテキスト.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>スクロールを可能にするテキスト. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </div> </body> </html>