วิธีการ - ภาพติดหนึบ
เรียนรู้วิธีสร้างภาพติดหนึบด้วย CSS
ภาพติดหนึบ
หมายเหตุ:ตัวอย่างนี้ใช้ไม่ได้ใน Internet Explorer หรือ Edge 15 และเวอร์ชันก่อนหน้า
ภาพติดหนึบ
ตัวอย่าง
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
องค์ประกอบที่มีposition: sticky;
จะถูกจัดตำแหน่งตามตำแหน่งการเลื่อนของผู้ใช้
องค์ประกอบแบบติดหนึบจะสลับระหว่างrelative
และfixed
ขึ้นอยู่กับตำแหน่งการเลื่อน มีตำแหน่งสัมพันธ์กันจนกว่าจะพบตำแหน่งออฟเซ็ตที่กำหนดในวิวพอร์ต จากนั้นจึง "เกาะติด" เข้าที่ (เช่น ตำแหน่ง:คงที่)
หมายเหตุ: Internet Explorer, Edge 15 และเวอร์ชันก่อนหน้าไม่สนับสนุนการวางตำแหน่งแบบติดหนึบ Safari ต้องใช้ -webkit- นำหน้า (ดูตัวอย่างด้านล่าง) คุณต้องระบุอย่างน้อยหนึ่งรายการtop
, หรือ สำหรับ right
การกำหนดตำแหน่งแบบติดหนึบในการทำงานbottom
left
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการจัดตำแหน่ง CSS โปรดอ่านบทแนะนำตำแหน่ง CSS ของเรา
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการจัดรูปแบบรูปภาพ โปรดอ่านบทช่วยสอนCSS Images ของเรา