Day24 要做的是將導覽列黏到畫面最上方的功能

定位屬性

• sticky

<nav className="sticky top-0 bg-white shadow-md z-50">

畫面結構

  return (
    <div className="min-h-screen bg-gray-100">
      <header className="bg-blue-500 text-white p-4">
        <h1 className="text-2xl font-bold">Sticky Nav Demo</h1>
      </header>

      <nav className="sticky top-0 bg-white shadow-md z-50">
        <ul className="flex justify-center space-x-4 p-4">
          <li>
            <a href="#" className="hover:text-blue-500">
              Home
            </a>
          </li>
          <li>
            <a href="#" className="hover:text-blue-500">
              About
            </a>
          </li>
          <li>
            <a href="#" className="hover:text-blue-500">
              Services
            </a>
          </li>
          <li>
            <a href="#" className="hover:text-blue-500">
              Contact
            </a>
          </li>
        </ul>
      </nav>

      <main className="container mx-auto p-4">
        {sections.map(({ id, title, content }) => (
          <section key={id} className="mb-8">
            <h2 className="text-xl font-semibold mb-2">{title}</h2>
            <p>{content}</p>
          </section>
        ))}
      </main>
    </div>
  );

DEMO

https://codesandbox.io/p/devbox/8gwnmp