div 粘性标题在 TailwindCSS 中不起作用

Question

我正在尝试使用 TailwindCSS 创建一个粘性标题，但似乎无法使其工作。

我已经阅读了文档，似乎我只需要添加sticky top-0到我的 div 中即可使其具有粘性，但它不起作用。

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

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>
  );
};

上面的代码呈现以下组件：

此外，您还可以在此处找到我的应用程序的部署版本。

我想用我的标头组件实现类似的目标。

任何帮助深表感谢。

Answer 1

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

在您的情况下，可滚动元素是根__next容器。基本上，这意味着您需要删除此 div<div className="flex flex-col drop-shadow-2xl">并将其替换为React.Fragment，因此您的两个标题（倒计时和第二个标题）将是此可滚动 div 的直接子级。