div 粘性 header 在 TailwindCSS 中不工作

Question

我正在尝试使用 TailwindCSS 创建粘性 header，但似乎无法正常工作。

我已经阅读了 docs 并且似乎我只需要将 sticky top-0 添加到我的 div 以使其具有粘性，但它不起作用。

为了可读性，我已尽力清理我的代码，但如果您对整个代码感兴趣，您可以找到它 here.

import { Logo, ToolbarButton, IconLink, Countdown } from "@lib/atoms";
import { faWhatsapp, faFacebook } from "@fortawesome/free-brands-svg-icons";
import {
  faHandHoldingHeart,
  faHeadphonesAlt,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export const Toolbar = () => {

  return (
    <div className="flex flex-col drop-shadow-2xl">

      <div className="h-16 flex items-center justify-center bg-rs-secondary">
        <div className="container flex justify-between">
          <div className="flex gap-4 items-center">
            <IconLink
              icon={faFacebook}
              href="https://www.facebook.com/estereo.sulamita"
            />
            <IconLink icon={faWhatsapp} href="https://wa.link/logvtp" />
          </div>
          <Countdown />
        </div>
      </div>
      
      {/* I want this div to be sticky */}
      <div className="sticky top-0 h-20 flex justify-center bg-white">
        <div className="container flex items-center h-full justify-between">
          <Logo />
          <div className="flex">
            <ToolbarButton>Inicio</ToolbarButton>
            <ToolbarButton>Videos</ToolbarButton>
            <ToolbarButton>Colaboradores</ToolbarButton>
            <ToolbarButton
              className="group"
              hoverBackgroundColor="hover:bg-black"
              primary={true}
            >
              <FontAwesomeIcon
                icon={faHandHoldingHeart}
                className="group-hover:text-white w-4"
              />
            </ToolbarButton>
            <ToolbarButton
              backgroundColor="bg-rs-primary"
              hoverBackgroundColor="hover:bg-black"
              textColor="text-white"
              primary={true}
            >
              Reproducir
              <FontAwesomeIcon icon={faHeadphonesAlt} className="w-4 ml-3" />
            </ToolbarButton>
          </div>
        </div>
      </div>

    </div>
  );
};

以上代码呈现以下组件：

此外，您可以找到我的应用程序的已部署版本 here.

我想用我的 header 组件实现类似 this 的效果。

非常感谢任何帮助。

Answer 1

sticky 元素应该是可滚动元素的直接 child。

在您的例子中，可滚动元素是根 __next 容器。基本上这意味着您需要删除此 div <div className="flex flex-col drop-shadow-2xl"> 并将其替换为 React.Fragment 因此您的 headers、倒计时和第二个 Header 将是直接的children 这个滚动条div。

div 粘性 header 在 TailwindCSS 中不工作

div sticky header not working in TailwindCSS

css

reactjs

tailwind-css