เมื่อ 4 ปีก่อน Eric Bidelman ได้เขียนบล็อกโพสต์ที่ยอดเยี่ยมเกี่ยวกับข้อเท็จจริงที่ว่า position: sticky ได้เปิดตัวใน WebKit ซึ่งในขณะนั้นเป็นเครื่องมือขับเคลื่อน Chrome (รวมถึงเบราว์เซอร์อื่นๆ อีกมากมาย รวมถึง Safari) 1 ปีต่อมา เราสร้างความตกใจให้กับนักพัฒนาเว็บด้วยการนำ position:sticky ออกจาก Chrome เนื่องจาก "การใช้งานในปัจจุบันไม่ได้ออกแบบมาให้ผสานรวมกับระบบการเลื่อนและการจัดวางภาพที่มีอยู่ได้ดี"
เราต้องการนำฟีเจอร์นี้กลับมาใช้ใน Chrome เสมอ ดังที่ข้อบกพร่องระบุไว้ว่า "เมื่อเราจัดระเบียบการเลื่อนและการคอมโพสภาพแล้ว เราควรกลับไปที่ position:
sticky และนำฟีเจอร์นี้ไปใช้ในลักษณะที่ผสานรวมกับส่วนที่เหลือของเครื่องยนต์ได้ดี" ข้อบกพร่องเกี่ยวกับเมตาในการติดตามการติดตั้งใช้งานได้รับการแก้ไขมาตั้งแต่ปี 2013
ข่าวดีคือตั้งแต่ Chrome 56 (ปัจจุบันเป็นเวอร์ชันเบต้าตั้งแต่เดือนธันวาคม 2016 และเวอร์ชันเสถียรในเดือนมกราคม 2017) position: sticky กลับมาอยู่ใน Chrome แล้ว
position:sticky คืออะไร
เราใช้เวลาสักพักกว่าจะมาถึงจุดนี้ เหตุใดเราจึงตื่นเต้นกับเรื่องนี้
position:sticky เป็นแอตทริบิวต์การจัดตำแหน่ง CSS ที่ช่วยให้คุณแก้ไของค์ประกอบในวิวพอร์ตได้ (เช่น ยึดองค์ประกอบไว้ที่ด้านบนของหน้าจอ) แต่จะใช้งานได้ก็ต่อเมื่อองค์ประกอบหลักแสดงในวิวพอร์ตและอยู่ภายในค่าเกณฑ์เท่านั้น เมื่อไม่ได้ยึดกับวิวพอร์ต องค์ประกอบจะทํางานเหมือนกับposition: relative ฟีเจอร์นี้เป็นส่วนเสริมที่ยอดเยี่ยมและใช้งานง่ายมากสำหรับแพลตฟอร์ม ซึ่งทำให้คุณไม่ต้องใช้ JavaScript ใน onscroll event handler เพียงเพื่อล็อกองค์ประกอบไว้ที่ด้านบนของวิวพอร์ต
ลักษณะของภาพในบล็อก ซึ่งช่วยให้ฉันสามารถแสดงส่วนหัวของส่วนปัจจุบันที่ด้านบนของหน้าจอขณะที่คุณอ่านบทความที่ค่อนข้างยาวและอ่านยากของฉันได้ :\
หากต้องการใช้ฟีเจอร์นี้ ให้ระบุว่าแอตทริบิวต์ 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 มีดังนี้