fix เมนูให้ติดอยู่ด้านบน เมื่อ scroll ด้วย position: fixed

fix เมนูให้ติดอยู่ด้านบน เมื่อ scroll ด้วย position: fixed บทความนี้สอนใช้คำสั่ง position: fixed ร่วมกับ top: 0px เพื่อ fix เมนูให้ติดอยู่ด้านบนของเว็บไซต์ เวลา scroll เมนูจะเลื่อนตาม สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง fix เมนูให้ติดอยู่ด้านบน เมื่อ scroll ด้วย position: fixed

<style>
    * {
        padding: 0;
        margin: 0;
    }
    #menu {
        list-style: none;
        background: wheat;
        text-align: center;
        padding: 10px;
        position: fixed;
        top: 0px;
        width: 100%;
    }
    #menu li {
        display: inline;
        padding: 10px;
    }
</style>

<ul id="menu">
    <li>หน้าแรก</li>
    <li>สินค้า</li>
    <li>เกี่ยวกับเรา</li>
</ul>

fix เมนูให้ติดอยู่ด้านบน เมื่อ scroll ด้วย position: fixed และ top: 0px สามารถอธิบายคำสั่งได้ดังนี้

1. position: fixed คือ กำหนดให้ elements หรือเมนู fix ไว้ที่ตำแหน่งใดตำแหน่งหนึ่งแบบคงที่ จากตัวอย่าง fix เมนูให้ติดอยู่ด้านบน

2. top: 0px คือ กำหนดให้ fix เมนูให้ติดอยู่ด้านบน เมื่อใช้ร่วมกับคำสั่ง position: fixed