如何使用 Tailwind CSS 实用程序类使部分粘性

Question

在我的 Next.js Web 应用程序中，我有一个页面，如下所示：

我想使该部分（包含在

<aside>

标签中）以蓝色粘性突出显示，这样当我滚动时，它会保持在原来的位置，并且只有主要部分（包含图表的部分）会滚动。

这是

layout.tsx

文件：

import { dashboardConfig } from "@/config/dashboard";
import { MainNav } from "@/components/nav/main-nav";
import { DashboardNav } from "@/components/nav/dashboard-nav";

interface DashboardLayoutProps {
  children?: React.ReactNode;
}

export default async function DashboardLayout({
  children,
}: DashboardLayoutProps) {
  return (
    <div className="flex min-h-dvh flex-col relative">
      <header className="container z-40 bg-background">
        <MainNav />
      </header>
      <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative">
        <aside className="hidden w-[200px] flex-col md:flex sticky top-0">
          <DashboardNav items={dashboardConfig.sidebarNav} />
        </aside>
        <main className="flex w-full flex-1 flex-col overflow-hidden">
          {children}
        </main>
      </div>
    </div>
  );
}

请注意，我已将类

sticky

和

top-0

应用于我想要粘贴位置的部分。但它不起作用。

我做错了什么？

Answer 1

考虑通过

align-self: start

将

self-start

应用到粘性元素。默认情况下，它将具有

align-self: stretch

，这将使其成为其父网格元素的完整高度，因此不会观察到粘性效果。通过应用

align-self: start

，它的高度将仅与其内容一样高，如果存在垂直自由空间，则可以观察到粘性效果。

const dashboardConfig = { sidebarNav: '' };
const MainNav = () => 'MainNav';
const DashboardNav = () => 'DashboardNav';

function DashboardLayout({
  children,
}) {
  return (
    <div className="flex min-h-dvh flex-col relative">
      <header className="container z-40 bg-background">
        <MainNav />
      </header>
      <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative">
        <aside className="hidden w-[200px] flex-col md:flex sticky top-0 self-start">
          <DashboardNav items={dashboardConfig.sidebarNav} />
        </aside>
        <main className="flex w-full flex-1 flex-col overflow-hidden">
          {children}
        </main>
      </div>
    </div>
  );
}

function App() {
  return (
    <DashboardLayout>
      <div class="h-[200vh]"></div>
    </DashboardLayout>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App/>);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div id="app"></div>