วิธีปรับขนาด Navigation Bar ตอนเลื่อนจอ (Resize Navbar on Scroll) ด้วย CSS และ JavaScript

ตัวอย่างโค้ด

สร้าง Navbar ที่หดเล็กลงเมื่อผู้ใช้เลื่อนจอลง โดยลด padding และขนาดฟอนต์ของโลโก้ พร้อม transition ทำให้ดูนุ่มนวล

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Resize Navbar on Scroll</title>
  <style>
    *, *::before, *::after {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      margin-top: 60px; /* พื้นที่สำหรับ navbar fixed */
      padding: 0;
    }
    nav {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: rgb(39, 39, 39);
      overflow: auto;
      height: auto;
      transition: padding 0.5s ease;
      padding: 50px 10px; /* ขนาดเริ่มต้นใหญ่ */
    }
    .links {
      display: inline-block;
      text-align: center;
      padding: 14px;
      color: rgb(178, 137, 253);
      text-decoration: none;
      font-size: 17px;
    }
    .links:hover {
      background-color: rgb(100, 100, 100);
    }
    .selected {
      background-color: rgb(0, 18, 43);
    }
    .company-logo {
      font-size: 50px;
      color: white;
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      transition: font-size 0.3s ease;
    }
    .sample-content {
      height: 150vh;
      padding-top: 80px;
    }
  </style>
</head>
<body>
  <nav>
    <a class="company-logo">€</a>
    <a class="links selected" href="#">หน้าแรก</a>
    <a class="links" href="#"> เข้าสู่ระบบ</a>
    <a class="links" href="#"> สมัครสมาชิก</a>
    <a class="links" href="#"> ติดต่อเรา</a>
    <a class="links" href="#"> ข้อมูลเพิ่มเติม</a>
  </nav>

  <div class="sample-content">
    <h1>หัวข้อ 1</h1>
    <h2>หัวข้อ 2</h2>
    <h3>หัวข้อ 3</h3>
    <h4>หัวข้อ 4</h4>
    <h1>หัวข้อ 5</h1>
    <h2>หัวข้อ 6</h2>
    <h3>หัวข้อ 7</h3>
    <h4>หัวข้อ 8</h4>
  </div>

  <script>
    const nav = document.querySelector("nav");
    const logo = document.querySelector(".company-logo");

    window.addEventListener('scroll', () => {
      const scrolled = window.pageYOffset > 20 || document.documentElement.scrollTop > 20;
      
      if (scrolled) {
        nav.style.padding = "10px 10px";
        logo.style.fontSize = "20px";
      } else {
        nav.style.padding = "50px 10px";
        logo.style.fontSize = "50px";
      }
    });
  </script>
</body>
</html>

การทำงาน

• Navbar เริ่มต้นมี padding ใหญ่ (50px) และโลโก้ใหญ่ (50px)
• เมื่อเลื่อนจอลงเกิน 20px จะหดเหลี่ยม padding เหลือ 10px และโลโก้ 20px
• Transition ทำให้การเปลี่ยนขนาดดูนุ่มนวล

โครงสร้าง CSS สำคัญ

• position: fixed; top: 0 - ติด navbar ไว้บนสุดตลอดเวลา
• transition: padding 0.5s, font-size 0.3s - animation สำหรับการเปลี่ยนขนาด
• body { margin-top: 60px } - เว้นที่สำหรับ navbar ไม่ให้บังเนื้อหา

JavaScript Logic

const scrolled = window.pageYOffset > 20 || document.documentElement.scrollTop > 20;

• ตรวจสอบทั้ง window.pageYOffset (มาตรฐาน) และ documentElement.scrollTop (IE legacy)
• Threshold 20px - เริ่มหดเมื่อเลื่อนลงเล็กน้อย

แนวทางปรับปรุงสมัยใหม่

• ใช้ CSS Class แทนการตั้งค่า style โดยตรง: nav.classList.toggle('scrolled', scrolled)
• ใช้ IntersectionObserver ตรวจจับ element sentinel แทน scroll event เพื่อประสิทธิภาพ
• ใช้ CSS Custom Properties สำหรับค่าที่ปรับเปลี่ยนได้ง่าย
• Debounce scroll handler หากมีการคำนวณซับซ้อน

ตัวอย่างปรับปรุงด้วย Class

.nav.scrolled { padding: 10px 10px; }
.nav.scrolled .company-logo { font-size: 20px; }

nav.classList.toggle('scrolled', window.scrollY > 20);