ผมเสียเวลาครึ่งวันไปกับการหาวิธีทำ Single page ที่ดีไซน์ให้แต่ละหน้า section สไลด์เลื่อนขึ้นมาทับหน้าsection ปัจจุบัน
มี tools มากมายสำหรับเพิ่มลูกเล่นให้กับ mouse scroll อย่างเช่น Scrollmagic.io หรืออย่าง React spark scroll แต่ดูๆแล้วใช้งานยากไปนิดนึง และทำให้เว็บเราอ้วนขึ้น เพราะต้อง import มือที่สามอย่าง Animate.css มาอีก
และแล้วก็พบหนทางสว่าง หลังจากที่ต้องเขียนโค้ดเพิ่มอีกหลายบรรทัด ก็จะเหลือเพียงแค่
position: sticky;
top: 0;top: 0 เป็นการกำหนดให้ element นั้นๆขึ้นไปได้ไม่เกินขอบบนสุดของหน้าจอ เพื่อให้แต่ละ element มันมาทับกัน นอกเหนือจากนี้ ก็สามารถให้มันติดกับด้านอื่นได้ด้วย left, right, bottom เช่นกัน
หลังจากนี้ก็ยังสามารถเอาไปต่อยอดให้เว็บมี animation เป็น parallax ได้อีกด้วย
ระวังด้วย!
เช็ค parent div ให้ดี เพราะว่า overflow: hidden นั้นจะทำให้ sticky ไม่ทำงานเอาได้นะ!
