เมื่อ 4 ปีก่อน Eric Bidelman ได้เขียนบล็อกโพสต์ที่น่าสนใจซึ่งพูดถึงข้อเท็จจริงที่ว่า position: sticky อยู่ใน WebKit ซึ่งในเวลานั้นเป็นเครื่องมือที่ขับเคลื่อน Chrome (และเบราว์เซอร์อื่นๆ อีกมากมาย รวมถึง Safari) 1 ปีต่อมา เรานำ position:sticky ออกจาก Chrome จนน่าตกใจมากเพราะ "การใช้งานในปัจจุบันไม่ได้ออกแบบมาในลักษณะที่สามารถผสานรวมเข้ากับระบบการเลื่อนและการประกอบภาพที่มีอยู่ได้เป็นอย่างดี"
เราต้องการให้ Chrome กลับมาใช้ใน Chrome อยู่เสมอ ตามข้อบกพร่องที่กล่าวว่า "เมื่อเลื่อนและจัดองค์ประกอบเสร็จแล้ว เราควรกลับไปที่ position:
sticky และนำฟีเจอร์นี้ไปผสานรวมเข้ากับเครื่องมืออื่นๆ ที่เหลือ" ข้อบกพร่องเมตาที่ติดตามการติดตั้งใช้งานได้มาตั้งแต่ปี 2013
ข่าวดีคือ Chrome 56 (ปัจจุบันเป็นเวอร์ชันเบต้าในเดือนธันวาคม 2016 และเสถียรในเดือนมกราคม 2017) position: sticky กลับมาใน Chrome แล้ว
ตำแหน่ง:ติดหนึบคืออะไร
ใช้เวลาสักพักกว่าจะมาถึงจุดนี้ได้ แล้วทำไมฉันถึงตื่นเต้นขนาดนี้ล่ะ
position:sticky เป็นแอตทริบิวต์การวางตำแหน่ง CSS ที่ให้คุณแก้ไของค์ประกอบให้กับวิวพอร์ตได้ (เช่น ตรึงองค์ประกอบไว้ที่ด้านบนของหน้าจอ) แต่เฉพาะในกรณีที่หน่วยโฆษณาระดับบนสุดปรากฏในวิวพอร์ตและอยู่ภายในค่าเกณฑ์เท่านั้น เมื่อไม่ได้กำหนดตายตัวในวิวพอร์ต องค์ประกอบจะทำหน้าที่เหมือนเป็น position: relative ซึ่งเป็นการเพิ่มแพลตฟอร์มที่ไม่จำเป็นต้องใช้ JavaScript ในเครื่องจัดการเหตุการณ์ onscroll เพียงเพื่อล็อกองค์ประกอบไว้ที่ด้านบนของวิวพอร์ต
นี่คือลักษณะที่ปรากฏในบล็อกของฉัน ทำให้ผมสามารถเก็บส่วนหัวของส่วนปัจจุบันไว้ที่ด้านบนของหน้าจอได้ ขณะที่คุณอ่านบทความที่ ยาวแต่ใช้เวลานาน :\
หากต้องการใช้ฟีเจอร์นี้ ให้ระบุว่าแอตทริบิวต์ position ควรมีค่า sticky ในองค์ประกอบที่คุณต้องการให้เป็นเช่นนั้น
นอกจากนี้ คุณยังสามารถเพิ่มระยะห่างจากจุดที่ค้างอยู่ได้ด้วย
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
ตัวอย่างก่อนหน้านี้จะแก้ไของค์ประกอบ <h3> ที่ขนาด 10 พิกเซลจากด้านบนของวิวพอร์ต หากต้องการแก้ไขที่ด้านบนของวิวพอร์ตโดยตรง คุณจะต้องตั้งค่าแอตทริบิวต์ top เป็น top: 0px
การสนับสนุนสำหรับฟีเจอร์นี้ค่อนข้างดีมาก มีใน Chrome (ใช่แล้ว),
Firefox และ Safari รายละเอียดเพิ่มเติมเกี่ยวกับ position:sticky มีดังนี้