การเขียนโค้ดสร้างปุ่มลอยบนเว็บไซต์

เมื่อเลื่อนหน้าเว็บลงไปด้านล่างหรือเลื่อนขึ้นไปของเว็บไซต์ ยังคงแสดงปุ่มตามตำแหน่งที่กำหนดบนหน้าจอเว็บไซต์ สามารถเขียนโค้ดด้วยภาษา css

หากต้องการให้ element ชิดขอบบนของหน้าเว็บ

position: sticky; /* จะเริ่มทำงานยึดตำแหน่งตั้งแต่ผู้ใช้เลื่อนลงมาด้านล่างหรือเลื่อนขึ้นไปของเว็บ */
top: 0; /* ตำแหน่งระยะห่างระหว่าง element กับขอบบนของหน้าเว็บ */


ดังตัวอย่างด้านล่าง

<style>
   #fix_top { /* ตั้งชื่อ id */
      position: sticky; 
      top: 0; 
      z-index: 1000; /* กำหนดลำดับของการแสดงของ element ค่าที่มากกว่า จะอยู่ด้านหน้า */
      background-color : yellow; /* ใส่สีพื้นหลังของบล็อก */
      padding: 10px; /* กำหนดค่าระยะห่างระหว่างเนื้อหาและเส้นขอบของเว็บ */
   }
</style>

ต่อไปให้ใส่ค่า id ในบล็อก ที่ต้องการยึดตำแหน่ง เมื่อเริ่มเลื่อนลงมา ดังตัวอย่าง

<div id="fix_top">
      <input type="submit" value="บันทึก">
</div>

Run เพื่อดูผลลัพธ์

ผู้เขียน

Sinnapa Prasith-Rathsint
sinnapa@g.swu.ac.th