วิธีสร้าง Sticky Header ด้วย CSS

Leonard Strauss included in Programming Web Design Css

2023-10-31 265 words 2 minutes

Contents

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

ส่วนหัวแบบถาวรที่ยังคงคงที่ในตำแหน่งใดตำแหน่งหนึ่งบนหน้าเว็บเรียกว่า"ส่วนหัวแบบติดหนึบ"ในการสร้างฟังก์ชันดังกล่าว คุณสมบัติ CSS ที่เฉพาะเจาะจง เช่น คุณสมบัติ"ตำแหน่ง"ที่มีค่า"แท่ง"

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

มีการแสดงโลโก้และชื่อแบรนด์อย่างเด่นชัด จึงเป็นการรักษาลักษณะเฉพาะของแบรนด์

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

การออกแบบส่วนหัว: โครงสร้าง HTML

รากฐานที่สำคัญของส่วนหัวแบบติดหนึบที่มีประสิทธิภาพนั้นอยู่ที่สถาปัตยกรรม HTML หากต้องการสร้างองค์ประกอบสำคัญของส่วนหัวแบบติดหนึบ ให้ทำตามขั้นตอนเหล่านี้เพื่อสร้างองค์ประกอบ HTML ที่จำเป็น

 <body>
   <header>
     <span class="logo">Company Logo ðŸ </span>
     <nav>
       <ul>
         <li><a href="#home">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#services">Services</a></li>
         <li><a href="#contact">Contact</a></li>
       </ul>
     </nav>
   </header>
   <main id="home"><h1>Home page</h1></main>
   <section id="about"><h1>About</h1></section>
   <section id="services"><h1>Services</h1></section>
   <section id="contact"><h1>Contact</h1></section>
</body>

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

วางรากฐานด้วย CSS

CSS ใช้คุณลักษณะของโมเดลกล่องต่างๆ เช่น Padding, Margin และ Flexbox เพื่อสร้างเลย์เอาต์ที่ดึงดูดสายตา โดยแต่ละส่วนจะมีความสูงเท่ากัน

 @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { font-size: 62.5%; }

body { font-family: "Quicksand", sans-serif; }

main,
section { height: 100vh; }

.logo { font-size: 3rem; }

main,
header,
section {
  display: flex;
  align-items: center;
}

main { justify-content: center; }

header {
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #b2babb;
 }

nav ul {
  display: flex;
  column-gap: 2rem;
  list-style: none;
}

a {
  text-decoration: none;
  font-size: 2rem;
  color: #333;
}

section { justify-content: center; }

#home { background: #2c3e50; }

#about { background: #ccccff; }

#services { background: #f5b7b1; }

#contact { background: #40e0d0; }

h1 {
 font-size: 4rem;
 color: #fff;
}

ตอนนี้หน้าควรมีลักษณะดังนี้:

การใช้เอฟเฟกต์ Sticky: CSS

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

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

 header {
  justify-content: space-between;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
}

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

เบราว์เซอร์ของคุณไม่รองรับแท็กวิดีโอ

จัดการปัญหาการซ้อนที่อาจเกิดขึ้น

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

 header {
  justify-content: space-between;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 9999;
}

รวมแอตทริบิวต์การเลื่อนที่ทันสมัยเข้ากับแท็ก HTML เพื่อปรับปรุงประสบการณ์ผู้ใช้โดยรวมในลักษณะที่หรูหรา:

 html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

การเลื่อนของหน้านี้ได้รับการปรับปรุงให้มีความราบรื่นและลื่นไหลเมื่อมีการเปลี่ยนระหว่างส่วนต่างๆ ทำให้ผู้ใช้ได้รับประสบการณ์ที่สนุกสนานยิ่งขึ้น

เบราว์เซอร์ของคุณไม่รองรับแท็กวิดีโอ

ยกระดับการนำทางเว็บด้วย CSS Sticky Headers

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

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