bt-trader/app/Views/layouts/front/top.php

<!-- top start -->
<style>
  /* ===== Header (BT-Trader style) ===== */
  .bt-header {
    background: #0b0b0b;
    border-bottom: 1px solid rgba(37, 99, 235, .35);
    position: sticky;
    top: 0;
    z-index: 9999;

    /* ✅ 스크롤 hide/show 애니메이션 */
    transform: translateY(0);
    transition: transform .55s ease;
    will-change: transform;
  }

  @media (min-width: 992px) {
    .bt-header .nav-link {
      padding: 0.5rem 3.75rem;
    }
  }

  .bt-header .nav-link {
    color: rgba(255, 255, 255, .92) !important;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .2px;

    /* ✅ 간격 3배 */
    padding: 0.5rem 3.75rem;

    white-space: nowrap;
    transition: color .18s ease, opacity .18s ease;
  }

  /* ✅ 아래로 스크롤 시 숨김 */
  .bt-header.is-hidden {
    transform: translateY(-100%);
  }

  .bt-header .navbar {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  /* Left brand */
  .bt-brand {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    color: #fff;
  }

  .bt-brand .bt-logo {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    font-size: 72px;
    line-height: .9;
    letter-spacing: -2px;
    color: #fff;
  }

  .bt-brand .bt-sub {
    padding-top: 8px;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 600;
    color: #fff;
    opacity: .95;
  }

  /* Menu */
  .bt-header .nav-link {
    color: rgba(255, 255, 255, .92) !important;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .2px;
    padding: 0.5rem 1.25rem;
    white-space: nowrap;

    /* ✅ hover/out 부드럽게 */
    transition: color .18s ease, opacity .18s ease;
  }

  /* ✅ 밝은 보라색 hover */
  .bt-header .nav-link:hover {
    color: #b79cff !important;
    /* 밝은 보라 */
    opacity: 1;
  }

  /* Navbar container width similar to screenshot */
  .bt-container {
    max-width: 1250px;
  }

  /* mobile */
  .navbar-toggler {
    border-color: rgba(255, 255, 255, .25);
  }

  .navbar-toggler-icon {
    filter: invert(1);
  }
</style>

<header class="bt-header" id="btHeader">
  <nav class="navbar navbar-expand-lg">
    <div class="container bt-container">
      <!-- Brand -->
      <a class="bt-brand" href="#">
        <div class="bt-logo">BT</div>
        <div class="bt-sub">
          Better<br>
          Tomorrow,<br>
          Inc.
        </div>
      </a>

      <!-- Mobile toggle -->
      <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#btNav">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- Menu -->
      <div class="collapse navbar-collapse justify-content-center" id="btNav">
        <ul class="navbar-nav align-items-center">
          <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="/about-us">About Us</a></li>
          <li class="nav-item"><a class="nav-link" href="/products">Products</a></li>
          <li class="nav-item"><a class="nav-link" href="/logistics-services">Logistics &amp; Services</a></li>
          <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<script>
  (() => {
    const header = document.getElementById('btHeader');
    if (!header) return;

    let lastY = window.scrollY || 0;

    const SHOW_AT_TOP = 90;      // 상단에서는 항상 보이기
    const DELTA = 8;             // 미세 흔들림 무시
    const HIDE_AFTER_DOWN = 70;  // ✅ 아래로 "누적 70px" 내려가야 숨김 (느린 느낌)
    const SHOW_AFTER_UP = 20;   // ✅ 위로 "누적 20px" 올라오면 다시 보이기 (빠르게 복귀)

    let downAcc = 0;  // 아래로 스크롤 누적
    let upAcc = 0;  // 위로 스크롤 누적

    let ticking = false;

    const update = () => {
      const y = window.scrollY || 0;
      const diff = y - lastY;

      // 상단에서는 무조건 보이기 + 누적 리셋
      if (y <= SHOW_AT_TOP) {
        header.classList.remove('is-hidden');
        downAcc = 0; upAcc = 0;
        lastY = y;
        return;
      }

      // 너무 작은 움직임은 무시
      if (Math.abs(diff) < DELTA) {
        lastY = y;
        return;
      }

      if (diff > 0) {
        // 아래로
        downAcc += diff;
        upAcc = 0;

        // ✅ 충분히 내려간 뒤에 숨김
        if (downAcc >= HIDE_AFTER_DOWN) {
          header.classList.add('is-hidden');
        }
      } else {
        // 위로
        upAcc += (-diff);
        downAcc = 0;

        // ✅ 조금만 올려도 다시 보이게
        if (upAcc >= SHOW_AFTER_UP) {
          header.classList.remove('is-hidden');
        }
      }

      lastY = y;
    };

    window.addEventListener('scroll', () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        update();
        ticking = false;
      });
    }, { passive: true });

    update();
  })();
</script>
<!-- top end -->