การใช้ Sticky Position ใน CSS

คุณเลยปวดหัวกับการอ่านหน้าเว็บยาวๆ แล้วมีหัวข้อไล่ไปเรื่อยๆ แล้วลืมว่าที่กำลังอ่านอยู่นั้นมันคือเรื่องอะไรไหมหละซาร่าห์ ใช่เลยก่อนน้านี้มีคนพยายามแก้ปัญหาโดยการเขียน Javascript หรือใช้ Framework ของ Javascript เข้ามาเพื่อซ่อมแซมการหลงลืมหัวข้อโดยการให้มันติดค้างอยู่ตรงบราวเซ่อร์ด้านบนเมื่อเราเลื่อนไปอ่านเนื้อหาในหัวข้อนั้นๆไปเรื่อยๆ

แต่ในวันนี้เรามีข่าวมาแจ้งว่าสำหรับการเขียนเว็บเพื่อให้แสดงแบบนั้นเราไม่จำเป็นต้องใช้ความช่วยเหลือจาก Javascript อีกต่อไปแล้ว เมื่อ CSS มีความสามารถใหม่เพิ่มเข้ามา นั่นก็คือเราสามารถสั่งให้ Element ใดๆ สามารถเกาะติดอยู่ตรง View Port เมื่อเราเลื่อนหน้าจอไปถึง

Sticky ใน CSS ที่จะพูดถึงในวันนี้เป็นของใหม่ที่ยังไม่ค่อยมีการพูดถึงกันแพร่หลายเพราะก่อนหน้านี้บราวเซ่อร์ต่างๆ ยังไม่รองรับและมาตรฐานของ CSSWG ก็ยังไม่ถูกประกาศออกมา ตอนนี้ยังเป็นสถานะ Working Draft ถ้าหากจะเอาไปใช้ก็อาจจะต้องมีเตรียมใจกันในเรื่องของบั๊กและการไม่เข้ากันต่างๆ ด้วย แต่คงไม่เป็นปัญหาสำหรับคนที่ต้องการลองของใหม่ ใช้ได้กับบราวเซอร์ไหนบ้างก็เข้าไปตราจสอบจาก Can I Use ผมมีตารางคร่าวๆ มาให้ดูกันก่อน

อ้าวอย่าให้เสียเวลา ไปดูโค้ดกับตัวอย่างกันเลย

ไปดูตัวอย่างเรื่อง CSS Sticky Position อย่าลืม View Source ดูโค้ดกันด้วยเด้อพี่น้อง

สังเกตเวลา Scroll ขึ้นไป H1 ที่เป็น Class ของ set-sticky จะติดค้างอยู่บนขอบบราวเซอร์ด้านบนจะมาถึงหัวข้อถัดไป

จบเรื่อง CSS Sticky

ขอย้อนรำลึกสั้นๆ อีกนิดหน่อยว่าแต่ละค่าที่เหลือนั้นมันมีอะไรบ้าง ซึ่งโดยปรกติแล้ว Position ของ Html Element ใดๆ จะเป็น Static เสมอจนกว่าจะถูกสั่งให้เป็นอื่น ซึ่ง Values ของ Position ใน CSS ก็ประกอบไปด้วย static | absolute | fixed | relative | sticky | initial | inherit

Static มันคือค่าที่ติดมากับโรงงานถ้าไม่เกิดการสั่งเปลี่ยนแปลงค่าใน Element ทุกอย่างที่อยู่ใน Document ก็จะวิ่งไปตาม Document Flow ปรกติ คำแนะนำคือไม่ต้องไปสนใจมากเขียนก่อนได้ก่อน เขียนทีหลังได้ทีหลัง

Absolute คือคำสั่งที่ทำให้ Element จัดวางตำแหน่งแบบอิสระโดยยึดโยงค่าความสัมพันธ์มาจากแม่ของมัน ที่ไม่ใช่ Static ถ้าจะให้ Element วิ่งไปอยู่ที่ไหนใน Layout ก็สามารถใช้ Top | Right | Bottom | Left สั่งการออกไปได้เลย หรือจะใช้ Margin จัดการก็ย่อมได้

Fixed คือคำสั่งที่เอาไว้สั่งให้ Element นั้นๆ ผูกพันธ์กับขอบบราวเซอร์หรือ View Port ของแต่ละ Device

Relative คือการกำหนดให้ Element ใดๆ มีจุดยืนเป็นของตัวเองไม่ต้องไปพึ่งพิงใครเขา ถ้าอยู่ตรงยอดไม้ก็ให้ใช้ชีวิตอยู่บนนั้น ซึ่งสามารถใช้เป็นจุดอ้างอิงให้กับลูกๆ ของมันที่ในอนาคตอาจจะถูกสั่งให้มี positioned เป็น absolute จะเห็นได้จากเวลาที่เราจะสั่งงาน Element ใดๆ ให้ทำงานบบ absolute และเราจะเลือกใช้ top|right|bottom|left เราจำเป็นต้องกลับไปดูก่อนเสมอว่า แม่ของมันนั้นอยู่ในสถานะที่เป็น Relative หรือไม่ ไม่เช่นนั้น layout ของเราอาจจะสะเดิดไปคนละทางก็เป็นได้

Initial คือคำสั่งการเสกให้ Element ที่ผ่านร้อนผ่านหนาวมาแล้วกลับไปสู่จุดเดิมที่เคยเจ็บ ไม่ว่าจะเคยโดนสั่งให้เป็นแบบไหนมา การเสก initial ใส่เข้าไปก็จะสามารถให้ให้ค่าต่างๆ เริ่มต้นกลับไปวิ่งตาม Document Flow อีกที

Inherit คือการสืบทอดคุณสมบัติมาจากแม่ ถ้าแม่ของมันมีค่าเป็นอะไร ตัวมันเองก็จะลอกเลียนตามแบบ

แค่นี้นะ ไปก่อนหละ

Back to Top

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top