ปัญหา CSS Sticky

Chai Phonbopit

Software Engineer & Blogger

22 July 2020

In

วันนี้นั่งปรับแต่ง CSS โดยจะลองใช้ position: sticky แต่แอบสงสัยว่า ทำไมบาง element มันก็ไม่ยอม sticky เวลาเลื่อน scroll ลงแฮะ ลองแก้ และลองหาข้อมูล พบว่า มีหลายๆข้อเลยที่มีโอกาสทำให้ css sticky ของเราไม่ทำงาน เช่น

  • ต้องใส่ height ให้ parent ด้วย
  • ถ้า parent มีการกำหนด overflow ไว้ sticky จะไม่ทำงาน
  • ต้องกำหนด top, right, bottom, left ให้มันด้วย อย่างใดอย่างหนึ่ง
  • IE 11 หมดโอกาส เพราะไม่ support

จาก MDN เขียนอธิบายไว้ แบบนี้

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

ตัวอย่าง Sticky

.sticky {
position: 'sticky';
top: '10px'
}

Links น่าอ่าน

  • #CSS
  • #Sticky
  • #Position