ท่าจอดที่ - เกาะติดตัวใน WebKit

Eric Bidelman

Twitter GitHub หน้าแรก

position: sticky เป็นวิธีใหม่ในการจัดตำแหน่งองค์ประกอบและมีแนวคิดคล้ายกับ position: fixed สิ่งที่แตกต่างคือองค์ประกอบที่มี position: sticky จะมีลักษณะเหมือน position: relative ภายในองค์ประกอบระดับบน จนกว่าจะถึงเกณฑ์ออฟเซ็ตที่กำหนดในวิวพอร์ต

Use Case

การถอดความจากข้อเสนอต้นฉบับของ Edward O’Connor เกี่ยวกับฟีเจอร์นี้

หมายเหตุ: เว็บไซต์หลายแห่งมีองค์ประกอบที่สลับไปมาระหว่างการเข้าและออกมี position: fixed โดยขึ้นอยู่กับตำแหน่งการเลื่อนของผู้ใช้ ซึ่งมักจะทำกับองค์ประกอบในแถบด้านข้างที่ผู้เขียนหน้าเว็บต้องการให้แสดงอยู่เสมอขณะที่ผู้ใช้เลื่อนหน้าจอ แต่จะอยู่ในช่องใดในหน้าเว็บเมื่อเลื่อนขึ้นไปด้านบน ตัวอย่างที่ดี ได้แก่ news.google.com (แถบด้านข้าง "เรื่องเด่น") และ yelp.com (แผนที่ผลการค้นหา)

ขอแนะนำการจัดตำแหน่งติดหนึบ

เปิดตัวการสาธิต

ด้วยการเพิ่ม position: sticky (ผู้ให้บริการนำหน้า) เราจะบอกองค์ประกอบเป็น position: relative ได้จนกว่าผู้ใช้จะเลื่อนรายการ (หรือระดับบนสุด) ให้อยู่ที่ 15 พิกเซลจากด้านบน

.sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 15px;
}

เมื่อเวลา top: 15px องค์ประกอบจะคงที่

เพื่อให้เห็นภาพของฟีเจอร์นี้ในการใช้งานจริง เราได้จัดทำการสาธิตซึ่งจะแสดงชื่อบล็อกขณะที่คุณเลื่อนดู

วิธีการเดิม: เหตุการณ์การเลื่อน

ก่อนหน้านี้เพื่อให้เว็บไซต์ได้รับเอฟเฟกต์ติดหนึบ เว็บไซต์จึงตั้งค่า Listener เหตุการณ์ scroll ใน JS เราใช้เทคนิคนี้ในบทแนะนำแบบ html5rocks ด้วย บนหน้าจอที่มีขนาดเล็กกว่า 1, 200 พิกเซล แถบด้านข้างของสารบัญจะเปลี่ยนเป็น position: fixed หลังจากเลื่อนมาระยะหนึ่ง

ต่อไปนี้คือวิธี (แบบเก่า) ที่จะมีส่วนหัวยึดอยู่กับด้านบนของวิวพอร์ตเมื่อผู้ใช้เลื่อนลง และจะกลับมาอยู่ตำแหน่งเดิมเมื่อผู้ใช้เลื่อนขึ้น

<div class="header"></div>

<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
    window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                    header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);
</script>

ลองใช้ได้ที่ http://output.jsbin.com/omanut/2/

ขั้นตอนนี้ง่ายพอ แต่โมเดลนี้จะแยกรายละเอียดลงอย่างรวดเร็วหากคุณต้องการดำเนินการนี้กับโหนด DOM จำนวนมาก เช่น ชื่อ <h1> ทุกชื่อของบล็อกเมื่อผู้ใช้เลื่อนดู

เหตุใด JS จึงไม่เหมาะสม

โดยทั่วไป เครื่องจัดการการเลื่อนไม่ใช่ความคิดที่ดี ลูกค้ามักจะทำงานมากเกินไปและสงสัยว่าทำไม UI ของผู้ใช้จึงมีคุณภาพต่ำ

อีกสิ่งหนึ่งที่ต้องพิจารณาคือมีเบราว์เซอร์จำนวนมากขึ้นที่ใช้การเลื่อนแบบเร่งด้วยฮาร์ดแวร์เพื่อปรับปรุงประสิทธิภาพ ปัญหาก็คือในเครื่องจัดการการเลื่อน JS ที่ทำงานอยู่ เบราว์เซอร์อาจกลับสู่โหมดช้าลง (ซอฟต์แวร์) ขณะนี้เราไม่ได้ใช้ GPU แล้ว แต่เราจะใช้ CPU แทน ผลลัพธ์ที่ได้ก็คือ ผู้ใช้รับรู้ภาพติดขัดมากขึ้นเมื่อเลื่อนหน้าเว็บ

ดังนั้น จึงเป็นการสมควรที่จะประกาศคุณลักษณะดังกล่าวใน CSS

การสนับสนุน

ขออภัย ไม่มีข้อกำหนดสำหรับเพลงนี้ ซึ่งเสนอให้ใช้ www-style ในเดือนมิถุนายนและเพิ่งลงจอดใน WebKit นั่นหมายความว่าไม่มีเอกสารที่เหมาะสมที่จะชี้ให้ อย่างไรก็ตาม หากระบุทั้ง left และ right ตามข้อบกพร่องนี้ left ก็จะเป็นผู้ชนะ ในทำนองเดียวกัน หากใช้ top และ bottom พร้อมกัน top จะชนะ

ขณะนี้การสนับสนุนคือ Chrome 23.0.1247.0 ขึ้นไป (Canary ปัจจุบัน) และ WebKit ทุกคืน