วิธีสร้าง Navigation Bar แสดงเมื่อเลื่อนลง (Slide Down) ด้วย CSS และ JavaScript

สร้าง Navigation Bar ที่ ซ่อนอยู่ด้านบนจอ และ สไลด์ลงมา เมื่อผู้ใช้เลื่อนหน้าจอลง (Scroll Down)

โค้ดตัวอย่างสมบูรณ์

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Slide Down on Scroll</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      margin-top: 60px; /* เว้นที่สำหรับ Navbar เมื่อแสดง */
      font-family: 'Segoe UI', Tahoma, sans-serif;
    }
    
    nav {
      position: fixed;
      top: -60px; /* ซ่อนอยู่เหนือจอ (ความสูง navbar) */
      left: 0;
      width: 100%;
      height: 60px;
      background-color: #272727;
      overflow: auto;
      transition: top 0.5s ease; /* Animation สไลด์ */
      z-index: 1000;
    }
    
    .nav-link {
      display: inline-block;
      text-align: center;
      padding: 14px 16px;
      color: #b289fd;
      text-decoration: none;
      font-size: 17px;
    }
    
    .nav-link:hover {
      background-color: #646464;
    }
    
    .nav-link.selected {
      background-color: #00122b;
    }
    
    .content {
      height: 200vh;
      padding: 20px;
    }
  </style>
</head>
<body>
  <nav id="navbar">
    <a class="nav-link selected" href="#">หน้าแรก</a>
    <a class="nav-link" href="#">เข้าสู่ระบบ</a>
    <a class="nav-link" href="#">สมัครสมาชิก</a>
    <a class="nav-link" href="#">ติดต่อเรา</a>
    <a class="nav-link" href="#">ข้อมูลเพิ่มเติม</a>
  </nav>
  
  <div class="content">
    <h1>เนื้อหาตัวอย่าง</h1>
    <p>ลองเลื่อนหน้าจอลงมา Navbar จะสไลด์ลงมา...</p>
    <h2>หัวข้อที่ 2</h2>
    <h3>หัวข้อที่ 3</h3>
    <h4>หัวข้อที่ 4</h4>
  </div>
  
  <script>
    const navbar = document.getElementById('navbar');
    let lastScrollTop = 0;
    
    window.addEventListener('scroll', function() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
      if (scrollTop > lastScrollTop && scrollTop > 60) {
        // Scroll Down และเลื่อนผ่านจุดเริ่มต้น - แสดง Navbar
        navbar.style.top = '0';
      } else if (scrollTop < lastScrollTop) {
        // Scroll Up - ซ่อน Navbar
        navbar.style.top = '-60px';
      }
      
      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
    });
  </script>
</body>
</html>

หลักการทำงาน

1. CSS เริ่มต้น: top: -60px - Navbar อยู่เหนือจอ (ซ่อน)
2. Scroll Down: เมื่อเลื่อนผ่าน 60px → top: 0 (สไลด์ลงมา)
3. Scroll Up: เมื่อเลื่อนขึ้น → top: -60px (สไลด์กลับซ่อน)
4. Transition: transition: top 0.5s ease - ทำให้เคลื่อนไหวนุ่มนวล

ความแตกต่างจาก "ซ่อนเมื่อ Scroll Down" (บทความก่อนหน้า)

ปรับปรุงประสิทธิภาพด้วย requestAnimationFrame

const navbar = document.getElementById('navbar');
let lastScrollTop = 0;
let ticking = false;

window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      const scrollTop = window.pageYOffset;
      const navbarHeight = navbar.offsetHeight;
      
      if (scrollTop > lastScrollTop && scrollTop > navbarHeight) {
        navbar.style.top = '0';
      } else if (scrollTop < lastScrollTop) {
        navbar.style.top = `-${navbarHeight}px`;
      }
      
      lastScrollTop = scrollTop;
      ticking = false;
    });
    ticking = true;
  }
});

การใช้งานจริง (Production Tips)

• ใช้ CSS Class แทน inline style: navbar.classList.toggle('visible', shouldShow)
• เพิ่ม will-change: transform ใช้ transform แทน top สำหรับ GPU Acceleration
• พิจารณา IntersectionObserver สำหรับ Trigger ที่แม่นยำกว่า
• ทดสอบบน Mobile (Touch Scroll พฤติกรรมต่าง Desktop)