Skip to main content
0

เกริ่นนำ

ในวันนี้ เราจะมาทำความรู้จักและมาลองทำ Sticky Header อย่างง่ายกันค่ะ ซึ่งเราใช้เครื่องมือในการทำมีเพียงสองอย่างเท่านั้น! คือ HTML และ CSS โดยก่อนที่เราจะเริ่มลงมือทำนั่น เรามาทำความรู้จักว่า Sticky Header คืออะไร

Sticky Header คืออะไร ?

Sticky headers / persistent headers คือ ส่วนหัวของเว็บไซต์หรือแอปพลิเคชันที่ยังคงที่อยู่ส่วนบนสุด ขณะที่ผู้ใช้เลื่อนลงดูเนื้อหาส่วนอื่นบนหน้าเว็บไซต์ โดยทั่วไปแล้ว Sticky Header จะใช้แถบนำทาง (nav bar) เพื่อให้ผู้ใช้สามารถเข้าถึงเมนูหรือข้อมูลสำคัญได้อย่างรวดเร็วและง่ายดาย ดัง วิดีโอด้านล่างนี้

ประโยชน์ของ Sticky Header

  • ปรับปรุงประสบการณ์ผู้ใช้ ช่วยให้ผู้ใช้สามารถเข้าถึงเมนูหรือข้อมูลสำคัญได้อย่างง่ายดายโดยไม่ต้องเลื่อนดูหน้าเว็บทั้งหมด
  • เพิ่มประสิทธิภาพการนำทาง (nav bar) สามารถช่วยให้ผู้ใช้นำทางเว็บไซต์โดยไม่จำเป็นต้องเลื่อนดูหน้าเว็บทั้งหมดเพื่อค้นหาเมนูหรือข้อมูลที่ต้องการ

วิธีการเขียน Sticky Header

ขั้นตอน 1 สร้าง ไฟล์ CSS และ HTML

ขั้นตอน 2 ในไฟล์ HTML เขียน ดังนี้

<body>
#ส่วนของ Header 
<header>
#ส่วนของ navigation bar
  <nav>
    <a href="" class="logo">blog</a>
    <ul>
      <li><a href="#first">First</a></li>
      <li><a href="#second">Second</a></li>
      <li><a href="#third">Third</a></li>
    </ul>
  </nav>
</header>
#การแยกส่วนของเนื้อหาออกเป็น 3 ส่วน
  <section id="first">First Section</section>
  <section id="second">Second Section</section>
  <section id="third">Third Section</section>
</body>

ในไฟล์ HTML นี้เราเขียนให้ แถบนำทาง (nav bar) อยู่ใน Header จากนั้นเราจะกำหนดให้แถบนำทาง (nav bar) อยู่ด้านบนของหน้าเว็บตลอดเวลา ไม่ว่าจะเลื่อนลงไปยังส่วนใดก็ตามโดยเขียนในไฟล์ CSS

ขั้นตอน 3 ในไฟล์ CSS เขียน ดังนี้


body {
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  position: sticky;
  top: 0;
  background: #d2c1c1a4;
  padding: 1rem 2rem;
}

nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 45px;
  font-weight: bold;
  color: black;
  text-decoration: none;
}

ul {
  display: flex;  
  box-sizing: border-box;

}

li {
  list-style: none;
  margin-right: 20px;
  font-size: 25px;
  font-weight: bold;
}
li a {
  text-decoration: none;
  color: black;
}
section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  font-weight: bold;
}

#first {
  background: #4280c3;
}

#second {
  background: #699bcf;
}

#third {
  background: #7b9bbe;
}

ในไฟล์ CSS นี้ มีคำสั่งที่น่าสนใจอยู่ใน header style คือ position: sticky; และ top: 0; ซึ่งเป็นคำสั่งเหล่านี้การกำหนดส่วน header ให้ยึดตำแหน่งด้านบนสุดของหน้าเป็นหลัก ไม่ว่าจะเลื่อนลงไปยังส่วนใดก็ตาม แต่ถ้าหากต้องการเปลี่ยนตำแหน่ง เราสามารถกำหนดตำแหน่งด้วยคำสั่ง Top, Right, Bottom, Left

สรุป

Sticky Header เป็นเครื่องมือที่มีประโยชน์ที่สามารถปรับปรุงประสบการณ์ผู้ใช้และประสิทธิภาพการนำทางของเว็บไซต์ โดยใช้คำสั่ง position: sticky; เพื่อให้ยึดตำแหน่งนั้น ๆ เป็นหลัก และการกำหนดตำแหน่งด้วยคำสั่ง Top, Right, Bottom, Left ตามที่ต้องการ เช่น top: 0; ต้องการให้อยู่ตำแหน่งบนสุดหน้าจอ อย่างไรก็ตามการใช้ Sticky Header ควรคำนึงถึงขนาดหน้าเว็บไซต์ที่แสดงผล และประเภทของเนื้อหาที่สอดคล้องกับการทำ Sticky Header

Woranut Dangworawith

Author Woranut Dangworawith

More posts by Woranut Dangworawith
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า