คำถามติดแท็ก sticky

9
ฉันจะสร้างส่วนหัวแบบเหนียวใน RecyclerView ได้อย่างไร (ไม่มี lib ภายนอก)
ฉันต้องการแก้ไขมุมมองส่วนหัวที่ด้านบนของหน้าจอเหมือนในภาพด้านล่างและไม่ใช้ไลบรารีภายนอก ในกรณีของฉันฉันไม่ต้องการทำตามตัวอักษร ฉันมีมุมมองสองประเภทที่แตกต่างกัน (ส่วนหัวและปกติ) ฉันต้องการแก้ไขเฉพาะด้านบนส่วนหัวสุดท้ายเท่านั้น

5
ตำแหน่งของฉัน: Sticky Element ไม่เหนียวเมื่อใช้ flexbox
ฉันติดอยู่กับเรื่องนี้เล็กน้อยและคิดว่าฉันจะแชร์สิ่งนี้position: sticky+ flexbox gotcha: เหนียว Div ของฉันทำงานได้ดีจนกระทั่งฉันเปลี่ยนมุมมองของฉันไปยังคอนเทนเนอร์กล่องดิ้นและทันใดนั้น div ก็ไม่เหนียวเมื่อถูกห่อด้วยแม่แบบ flexbox .flexbox-wrapper { display: flex; height: 600px; } .regular { background-color: blue; } .sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: red; } <div class="flexbox-wrapper"> <div class="regular"> This is the regular box </div> <div class="sticky"> This is the sticky box …

6
แถบด้านข้างเหนียว: ติดที่ด้านล่างเมื่อเลื่อนลงด้านบนเมื่อเลื่อนขึ้น
ตอนนี้ฉันกำลังมองหาวิธีแก้ปัญหาแถบด้านข้างที่เหนียว ฉันมีความคิดที่เฉพาะเจาะจงว่าฉันต้องการให้ดำเนินการอย่างไร อย่างมีประสิทธิภาพฉันต้องการให้มันติดอยู่ที่ด้านล่างเมื่อคุณเลื่อนลงจากนั้นทันทีที่คุณเลื่อนกลับขึ้นฉันต้องการให้มันติดอยู่ด้านบนในลักษณะที่ลื่นไหล (ไม่กระโดด) ฉันไม่สามารถหาตัวอย่างของสิ่งที่ฉันพยายามจะบรรลุได้ดังนั้นฉันจึงสร้างภาพที่ฉันหวังว่าจะอธิบายประเด็นให้ชัดเจนขึ้น: แถบด้านข้างอยู่ใต้ส่วนหัว เมื่อคุณเลื่อนลงแถบด้านข้างจะยังคงอยู่ในระดับเดียวกับเนื้อหาของเพจเพื่อให้คุณสามารถเลื่อนดูทั้งแถบด้านข้างและเนื้อหาได้ ไปถึงด้านล่างสุดของแถบด้านข้างแถบด้านข้างจะติดที่ด้านล่างของวิวพอร์ต (ปลั๊กอินส่วนใหญ่อนุญาตให้ติดที่ด้านบนเท่านั้นบางส่วนที่อนุญาตให้ติดที่ด้านล่างไม่อนุญาตให้ใช้ทั้งสองอย่าง) ไปถึงด้านล่างแถบด้านข้างจะอยู่เหนือส่วนท้าย ในขณะที่คุณเลื่อนกลับขึ้นแถบด้านข้างจะอยู่ในระดับเดียวกับเนื้อหาเพื่อให้คุณสามารถเลื่อนดูเนื้อหาและแถบด้านข้างได้อีกครั้ง ไปถึงด้านบนสุดของแถบด้านข้างแถบด้านข้างจะติดที่ด้านบนสุดของวิวพอร์ต ไปถึงด้านบนและแถบด้านข้างจะอยู่ด้านล่างส่วนหัว ฉันหวังว่านี่เป็นข้อมูลที่เพียงพอ ฉันได้สร้าง jsfiddle เพื่อทดสอบปลั๊กอิน / สคริปต์ใด ๆ ซึ่งฉันได้รีเซ็ตสำหรับคำถามนี้: http://jsfiddle.net/jslucas/yr9gV/2/ .
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.