วิธีซ่อนเมนูนำทางเมื่อเลื่อนหน้าจอลง ด้วย CSS และ JavaScript

สร้าง Navigation Bar ที่ซ่อนอัตโนมัติเมื่อผู้ใช้เลื่อนหน้าจอลง (Scroll Down) และแสดงเมื่อเลื่อนขึ้น (Scroll Up)

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

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ซ่อน Navbar เมื่อ Scroll Down</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      margin-top: 60px; /* ระยะห่างด้านบนเท่ากับความสูง navbar */
      font-family: 'Segoe UI', Tahoma, sans-serif;
    }
    
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #272727;
      color: #b289fd;
      overflow: auto;
      height: 50px;
      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; /* สร้างเนื้อหายาวเพื่อทดสอบ Scroll */
      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>
    <!-- เนื้อหาเยอะๆ เพื่อให้ Scroll ได้ -->
  </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 > 50) {
        // Scroll Down - ซ่อน Navbar
        navbar.style.top = '-60px';
      } else {
        // Scroll Up - แสดง Navbar
        navbar.style.top = '0';
      }
      
      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // ป้องกันค่าติดลบ
    });
  </script>
</body>
</html>

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

1. CSS: position: fixed; top: 0; transition: top 0.5s - ทำให้ Navbar ติดบนสุดและเคลื่อนไหวนุ่มนวล
2. JavaScript: ฟัง Event scroll เปรียบเทียบ scrollTop ปัจจุบันกับก่อนหน้า
3. Scroll Down: scrollTop > lastScrollTop → ย้าย Navbar ขึ้นไป top: -60px (ซ่อน)
4. Scroll Up: scrollTop < lastScrollTop → คืน Navbar มา top: 0 (แสดง)

ปรับปรุงจากโค้ดต้นฉบับ

• ใช้ window.addEventListener('scroll', ...) แทน window.onscroll (รองรับหลาย Listener)
• ใช้ window.pageYOffset รองรับทุก Browser รวม Mobile
• เพิ่ม lastScrollTop ตัวแปรติดตามทิศทาง Scroll
• เพิ่ม Threshold (scrollTop > 50) ป้องกันกระพริบที่ด้านบนสุด
• เพิ่ม z-index และ font-family สำหรับ UI ที่ดีขึ้น

การปรับแต่งเพิ่มเติม

// แสดง Navbar เฉพาะเมื่อ Scroll Up (ไม่แสดงตลอดเวลาที่ด้านบน)
const navbar = document.getElementById('navbar');
let lastScrollTop = 0;
let ticking = false;

window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      const scrollTop = window.pageYOffset;
      
      if (scrollTop > lastScrollTop && scrollTop > navbar.offsetHeight) {
        navbar.classList.add('hidden'); // CSS: .hidden { top: -100%; }
      } else {
        navbar.classList.remove('hidden');
      }
      
      lastScrollTop = scrollTop;
      ticking = false;
    });
    ticking = true;
  }
});