Dưới đây là mã nguồn để tạo hình ảnh dính (sticky) - giữ nguyên vị trí khi cuộn trang bằng CSS position:sticky:
Ví dụ
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img { position: sticky; top: 0; width: 300px; height: 300px; } </style> </head> <body> <h1>Some header text</h1> <img src="https://i.picsum.photos/id/721/400/400.jpg"> <h1>Some header text</h1> <h1>Some header text</h1> <h1>Some header text</h1> <p style="font-size: 40px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat odio ratione officia quod qui blanditiis animi! Repudiandae culpa recusandae dolor id soluta porro commodi quidem, incidunt voluptatum vitae similique nesciunt obcaecati odit enim repellat doloribus. Explicabo quisquam in beatae earum?</p> </body> </html>
Kết quả
Mã trên sẽ cho ra kết quả như sau:
Khi cuộn xuống một chút, hình ảnh sẽ giữ nguyên vị trí như sau:
