How to Fixed Top Menu

เวลาที่หน้าเว็บของเรามีการใช้เมนูที่อยู่ด้านบน เมื่อตัวเว็บมีเนื้อหาหรือข้อมูลที่มากขึ้น ทำให้ผู้ใช้ต้องใช้ scrollbar เพื่อเลื่อนหน้าเว็บดูข้อมูลต่างๆ แต่เมื่อเลื่อนแล้ว เมนูที่อยู่ด้านบนจะถูกเลื่อนขึ้นด้านบนตามไปด้วยและเมื่อผู้ใช้ต้องการที่จะใช้งานจึงจำเป็นที่จะต้องเลื่อนกลับขึ้นไป อาจทำให้ผู้ใช้เสียเวลามากขึ้น การ Fixed Menu คือการทำให้เมนูอยู่กับที่ซึ่งวิธีนี้จะทำให้เวลาผู้ใช้เลื่อนหน้าเพจลง เมนูจะไม่ถูกดันหายไปนั่นเอง เรามาดูโค้ดกันเลย~

.navbar {
 position: fixed; /* Set the navbar to fixed position */
 bottom: 0; /* Position the navbar at the bottom of the page */
 width: 100%; /* Full width */
}

โค้ดนี้แหละที่จะทำตัวเป็นพระเอกของบทความนี้ คือทำให้เมนูอยู่กับที่ตรงด้านบนนั่นเอง มาดูโค้ดตัวอย่างกันเลย~

หวังว่าบทความนี้จะเป็นประโยชน์ต่อใครหลายๆคนไม่มากก็น้อย เจอกันใหม่บทความถัดไปนะจ๊ะ :)