position: sticky ทำงานอย่างไรจริง ๆ และทำไมบางครั้งมันจึงใช้ไม่ได้?

Question

Accepted Answer

`position: sticky` เป็นแบบลูกผสม: องค์ประกอบจะมีพฤติกรรมเหมือน `relative` (อยู่ใน normal flow) **จนกระทั่ง** เลื่อนไปถึง threshold ที่คุณกำหนด แล้วจึงมีพฤติกรรมเหมือน `fixed` (ติดอยู่กับที่) แต่จะเป็นเช่นนั้นเฉพาะตอนที่ **containing block** ของมันยังอยู่บนหน้าจอเท่านั้น

```css
.section-header {
  position: sticky;
  top: 0;        /* sticks when its top edge reaches the viewport top */
}
```

ค่า `top` (หรือ `bottom`/`left`/`right`) เป็นสิ่งที่ **จำเป็น** เพราะมันกำหนด threshold ถ้าไม่มีค่านี้ sticky จะไม่ทำงานอะไรเลย

## ขอบเขต: มันติดอยู่เฉพาะภายใน parent ของมัน

องค์ประกอบ sticky ถูกจำกัดอยู่ภายใน **container แม่** ของมัน มันจะติดอยู่ขณะที่เลื่อน *ผ่าน* parent นั้น แล้วจึงเลื่อนหายไปเมื่อขอบล่างของ parent ผ่านไป นี่คือสิ่งที่ทำให้ "sticky section header" ทำงานได้ แต่ละ header จะติดอยู่เฉพาะตอนที่ section ของตัวเองอยู่ในมุมมองเท่านั้น

## ทำไมมันจึง "ใช้ไม่ได้" บ่อย ๆ — กรณีที่ล้มเหลว

**1. มี ancestor ที่มี `overflow: hidden/auto/scroll`** นี่คือสาเหตุอันดับ 1 sticky positioning จะถูกทำลายโดย ancestor ที่เลื่อนได้ใด ๆ เพราะองค์ประกอบจะติดอยู่โดยอ้างอิงกับ *scroll container นั้น* ไม่ใช่กับหน้า:

```css
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
```

**2. parent ไม่สูงพอ** sticky จะมีพื้นที่ให้ติดได้ก็ต่อเมื่อ parent สูงกว่าองค์ประกอบ sticky ถ้า parent สูงเท่ากัน ก็จะไม่มีอะไรให้เลื่อนผ่าน ดังนั้นมันจึงไม่มีทางดูเหมือนติดอยู่ได้

**3. ไม่ได้ตั้ง threshold** การลืม `top`/`bottom` หมายถึงไม่มีจุดติด

**4. ข้อจำกัดด้านความสูงบน parent** (เช่น flex parent ที่ยืดไอเท็มออก) ก็สามารถทำให้พื้นที่สำหรับเลื่อนหายไปได้เช่นกัน

## เช็กลิสต์สำหรับการดีบัก

```text
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
```

## ทำไมจึงสำคัญ

`position: sticky` ขับเคลื่อน sticky header, table header, แถบด้านข้าง และ UI แบบ "scrollspy" โดยไม่ต้องใช้ JavaScript

แต่ความแปลกของมัน โดยเฉพาะการที่ `overflow` บน ancestor *ตัวใด ๆ* ทำลายมันแบบเงียบ ๆ ทำให้มันเป็นแหล่งของการดีบัก "ทำไมมันถึงไม่ติด?" อยู่บ่อยครั้ง

การเข้าใจขอบเขตของ containing block และกับดักของ overflow คือสิ่งที่ช่วยให้คุณใช้มันได้อย่างน่าเชื่อถือ