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

Question

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

我已经阅读了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.

我想用我的标头组件实现类似this 的东西。

非常感谢任何帮助。

Answer 1

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

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