เกริ่นนำ
ในวันนี้ เราจะมาทำความรู้จักและมาลองทำ Sticky Header อย่างง่ายกันค่ะ ซึ่งเราใช้เครื่องมือในการทำมีเพียงสองอย่างเท่านั้น! คือ HTML และ CSS โดยก่อนที่เราจะเริ่มลงมือทำนั่น เรามาทำความรู้จักว่า Sticky Header คืออะไร
บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 15 พฤศจิกายน 2023
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
