การจัดตำแหน่งแบบตรึงและแบบยึดติด
ตรึงองค์ประกอบไว้กับพื้นที่แสดงผล หรือสร้างส่วนหัวและแถบด้านข้างที่ยึดติดขณะเลื่อน
การจัดตำแหน่งแบบตรึงและแบบยึดติด เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
position: fixed
องค์ประกอบแบบ fixed จะถูกจัดวางโดยอ้างอิงจากวิวพอร์ตของเบราว์เซอร์และคงอยู่กับที่แม้หน้าเว็บจะเลื่อน องค์ประกอบนี้จะถูกนำออกจากลำดับการจัดวางของเอกสารด้วย
<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>
กรณีการใช้งาน position: fixed
การใช้งานทั่วไปของ position: fixed:
- แถบนำทางที่อยู่ด้านบนตลอดเวลา
- ปุ่มการทำงานแบบลอย
- เครื่องมือแชตที่มุมขวาล่าง
- แบนเนอร์ขอความยินยอมเกี่ยวกับคุกกี้
- ชั้นซ้อนสำหรับหน้าต่างโมดัล
การชดเชยส่วนหัวแบบ fixed
ส่วนหัวแบบ fixed จะทับเนื้อหาที่อยู่ด้านล่าง ให้เพิ่มระยะเสริมหรือระยะขอบด้านบนที่มีค่าเท่ากับความสูงของส่วนหัว เพื่อดันเนื้อหาลง:
<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>
องค์ประกอบแม่ที่มี transform กับ fixed
ข้อควรระวังสำคัญคือ หากองค์ประกอบแม่มีการใช้ transform, perspective หรือ filter ของ CSS การกำหนดตำแหน่งแบบ fixed จะอ้างอิงจากองค์ประกอบแม่นั้นแทนวิวพอร์ต ซึ่งเป็นข้อผิดพลาดที่พบได้บ่อย
position: sticky
position: sticky เป็นรูปแบบผสม องค์ประกอบจะเลื่อนตามปกติจนกระทั่งถึงจุดเกณฑ์ที่กำหนด (เช่น top: 0) จากนั้นจะติดค้างอยู่ภายในคอนเทนเนอร์แม่
<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>
sticky ต้องมีองค์ประกอบแม่ที่เลื่อนได้
องค์ประกอบแบบ sticky จะติดค้างภายในบล็อกอ้างอิงของตัวเอง หากองค์ประกอบแม่สูงไม่พอให้เลื่อน sticky จะไม่มีผล องค์ประกอบแม่ต้องไม่ได้ตั้งค่า overflow เป็น hidden
บน ขวา ล่าง ซ้ายสำหรับ sticky
คุณต้องกำหนดค่าออฟเซ็ตอย่างน้อยหนึ่งค่าเพื่อเปิดใช้งาน sticky รูปแบบที่ใช้กันทั่วไปมีดังนี้:
<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>
หัวตารางแบบ sticky
sticky เหมาะอย่างยิ่งกับหัวตารางในตัวครอบตารางที่เลื่อนได้ เพราะหัวตารางจะยังมองเห็นได้ขณะที่ผู้ใช้เลื่อนดูแถวต่าง ๆ
<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>
รูปแบบแถบด้านข้างแบบ sticky
แถบด้านข้างแบบ sticky แบบคลาสสิกที่ยังอยู่ในมุมมองขณะที่เนื้อหาหลักเลื่อน:
<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>
สรุป Fixed เทียบกับ Sticky
ความแตกต่างสำคัญ:
- Fixed: อ้างอิงจากวิวพอร์ตเสมอ และอยู่นอกลำดับการจัดวางเสมอ
- Sticky: เลื่อนตามเนื้อหาจนถึงจุดเกณฑ์ ยังคงอยู่ในลำดับการจัดวาง และหยุดที่ขอบเขตขององค์ประกอบแม่
ประสิทธิภาพ: Fixed และเลเยอร์
องค์ประกอบแบบ fixed จะสร้างบริบทการซ้อนเลเยอร์ใหม่ และอาจทำให้เกิดการจัดวางใหม่ขณะเลื่อน หากองค์ประกอบนั้นทับพื้นที่ที่ต้องวาดใหม่ ควรทำให้องค์ประกอบแบบ fixed เรียบง่าย และหลีกเลี่ยงคุณสมบัติที่ใช้ทรัพยากรมาก เช่น box-shadow
ตรวจสอบความเข้าใจ
position: sticky มีข้อจำกัดใดที่ position: fixed ไม่มี
สรุป
position: fixed จะยึดองค์ประกอบไว้กับวิวพอร์ต เหมาะสำหรับการนำทางแบบติดค้างและชั้นซ้อน position: sticky จะเลื่อนตามปกติจนถึงจุดเกณฑ์แล้วจึงติดค้าง เหมาะอย่างยิ่งกับหัวตารางและแถบด้านข้าง ทั้งสองแบบต้องมีคุณสมบัติค่าออฟเซ็ตอย่างน้อยหนึ่งรายการเพื่อเปิดใช้งานการติดค้าง
คำถามที่พบบ่อย
บทเรียน “การจัดตำแหน่งแบบตรึงและแบบยึดติด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การจัดตำแหน่งแบบตรึงและแบบยึดติด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การจัดตำแหน่งแบบตรึงและแบบยึดติด”
ตรึงองค์ประกอบไว้กับพื้นที่แสดงผล หรือสร้างส่วนหัวและแถบด้านข้างที่ยึดติดขณะเลื่อน คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การจัดตำแหน่งแบบตรึงและแบบยึดติด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การจัดตำแหน่งแบบคงที่และสัมพัทธ์
- การจัดตำแหน่งแบบสัมบูรณ์และบล็อกบรรจุ
- การจัดตำแหน่งแบบตรึงและแบบยึดติด
- Z-index และบริบทการซ้อน