为什么位置粘性在我的代码中不起作用？

Question

有一个名为 TopOptions 的图像和组件，我想让它们固定在页面顶部。请让我知道我做错了什么。

      {!categorySearch && (
        <div className="max-w-2xl mx-auto z-40 relative overflow-x-hidden font-metropolis_semibold">
          <div className="sticky top-0">
            <div className=" z-40 bg-white w-full transition-all">
              <div
                id="logo"
                className={
                  logo
                    ? "px-md mt-10 font-medium"
                    : "px-md mt-10 font-medium animate"
                }
              >
                <div className="overflow-x-hidden ">
                  <img
                    src={settings.logo_intro_image_url}
                    alt={settings.name}
                    className="max-w-full object-contain company-logo"
                    style={{ height: settings.logo_height }}
                    id="company-logo"
                  />
                </div>
              </div>
              <div
                className={`${
                  logo
                    ? "shadow-none border-none"
                    : "border-b-2 border-gray-200"
                }`}
              >
                <TopOptions
                  showOption={showOption}
                  setShowOption={setShowOption}
                  addBorder={logo}
                  outlets={outlets}
                  languageLabels={languageLabels}
                  settings={selectedOutlet.settings}
                />
              </div>
            </div>
            {Object.keys(bannerArray).length === 1 ? (
              <div className="w-full px-md border-b-8 border-banner pb-md">
                {bannerArray &&
                  bannerArray.map((banner, index) => {
                    return (
                      <>
                        <PosterSlider
                          key={index}
                          image={banner.image}
                          loadingBanners={loadingBanners}
                          isSingle={Object.keys(bannerArray).length === 1}
                        />
                      </>
                    );
                  })}
              </div>
            ) : (
              <div className="max-h-full h-19.7 hide-scroll px-md flex overflow-x-auto gap-5p border-b-8 border-light-bg-gray">
                {bannerArray &&
                  bannerArray.map((banner, index) => {
                    return (
                      <PosterSlider
                        key={index}
                        image={banner.image}
                        loadingBanners={loadingBanners}
                        isSingle={Object.keys(bannerArray).length === 1}
                      />
                    );
                  })}
              </div>
            )}
            <div className="flex flex-row justify-between items-center px-md my-25p">
              <p className="font-metropolis_regular text-sm break-words">
                {languageLabels.like_to_order}
              </p>
              <img
                src={Search}
                alt="search"
                onClick={() => setCategorySearch(true)}
              />
            </div>
            <div className="grid grid-flow-row w-full grid-cols-2 place-items-center gap-10p px-md pb-20">
              {categoryList.map((category) => {
                // console.log(category);
                return (
                  <Dishes
                    key={category.category_id}
                    category={category}
                    languageLabels={languageLabels}
                    loading={loadingCategories}
                  />
                );
              })}
            </div>
            <BottomNavigation
              languageLabels={languageLabels}
              isLoyalty={settings.enable_reward_points_functionality}
            />
          </div>
        </div>
      )}

Answer 1

这是因为您在 parent 中隐藏了 overflow-x-hidden 。如果父溢出被隐藏，则粘性不起作用。

{!categorySearch && (
        <div className="max-w-2xl mx-auto z-40 relative  font-metropolis_semibold">
          <div className="sticky top-0">
            <div className=" z-40 bg-white w-full transition-all">
              <div
                id="logo"
                className={
                  logo
                    ? "px-md mt-10 font-medium"
                    : "px-md mt-10 font-medium animate"
                }
              >
                <div className="overflow-x-hidden ">
                  <img
                    src={settings.logo_intro_image_url}
                    alt={settings.name}
                    className="max-w-full object-contain company-logo"
                    style={{ height: settings.logo_height }}
                    id="company-logo"
                  />
                </div>
              </div>
              <div
                className={`${
                  logo
                    ? "shadow-none border-none"
                    : "border-b-2 border-gray-200"
                }`}
              >
                <TopOptions
                  showOption={showOption}
                  setShowOption={setShowOption}
                  addBorder={logo}
                  outlets={outlets}
                  languageLabels={languageLabels}
                  settings={selectedOutlet.settings}
                />
              </div>
            </div>
            {Object.keys(bannerArray).length === 1 ? (
              <div className="w-full px-md border-b-8 border-banner pb-md">
                {bannerArray &&
                  bannerArray.map((banner, index) => {
                    return (
                      <>
                        <PosterSlider
                          key={index}
                          image={banner.image}
                          loadingBanners={loadingBanners}
                          isSingle={Object.keys(bannerArray).length === 1}
                        />
                      </>
                    );
                  })}
              </div>
            ) : (
              <div className="max-h-full h-19.7 hide-scroll px-md flex overflow-x-auto gap-5p border-b-8 border-light-bg-gray">
                {bannerArray &&
                  bannerArray.map((banner, index) => {
                    return (
                      <PosterSlider
                        key={index}
                        image={banner.image}
                        loadingBanners={loadingBanners}
                        isSingle={Object.keys(bannerArray).length === 1}
                      />
                    );
                  })}
              </div>
            )}
            <div className="flex flex-row justify-between items-center px-md my-25p">
              <p className="font-metropolis_regular text-sm break-words">
                {languageLabels.like_to_order}
              </p>
              <img
                src={Search}
                alt="search"
                onClick={() => setCategorySearch(true)}
              />
            </div>
            <div className="grid grid-flow-row w-full grid-cols-2 place-items-center gap-10p px-md pb-20">
              {categoryList.map((category) => {
                // console.log(category);
                return (
                  <Dishes
                    key={category.category_id}
                    category={category}
                    languageLabels={languageLabels}
                    loading={loadingCategories}
                  />
                );
              })}
            </div>
            <BottomNavigation
              languageLabels={languageLabels}
              isLoyalty={settings.enable_reward_points_functionality}
            />
          </div>
        </div>
      )}

Answer 2

应该将 sticky 和 top-0 分配给我要粘贴的主要元素。

 {!categorySearch && (
        <div className="max-w-2xl mx-auto z-40 relative  font-metropolis_semibold">
          {/* <div className="relative"> */}
          <div className="sticky top-0 z-40 bg-white w-full transition-all">
            <div
              id="logo"
              className={
                logo
                  ? "px-md mt-10 font-medium"
                  : "px-md mt-10 font-medium animate"
              }
            >
              <div className="overflow-x-hidden ">
                <img
                  src={settings.logo_intro_image_url}
                  alt={settings.name}
                  className="max-w-full object-contain company-logo"
                  style={{ height: settings.logo_height }}
                  id="company-logo"
                />
              </div>
            </div>
            <div
              className={`${
                logo ? "shadow-none border-none" : "border-b-2 border-gray-200"
              }`}
            >
              <TopOptions
                showOption={showOption}
                setShowOption={setShowOption}
                addBorder={logo}
                outlets={outlets}
                languageLabels={languageLabels}
                settings={selectedOutlet.settings}
              />
            </div>
          </div>
          {Object.keys(bannerArray).length === 1 ? (
            <div className="w-full px-md border-b-8 border-banner pb-md">
              {bannerArray &&
                bannerArray.map((banner, index) => {
                  return (
                    <>
                      <PosterSlider
                        key={index}
                        image={banner.image}
                        loadingBanners={loadingBanners}
                        isSingle={Object.keys(bannerArray).length === 1}
                      />
                    </>
                  );
                })}
            </div>
          ) : (
            <div className="max-h-full h-19.7 hide-scroll px-md flex overflow-x-auto gap-5p border-b-8 border-light-bg-gray">
              {bannerArray &&
                bannerArray.map((banner, index) => {
                  return (
                    <PosterSlider
                      key={index}
                      image={banner.image}
                      loadingBanners={loadingBanners}
                      isSingle={Object.keys(bannerArray).length === 1}
                    />
                  );
                })}
            </div>
          )}
          <div className="flex flex-row justify-between items-center px-md my-25p">
            <p className="font-metropolis_regular text-sm break-words">
              {languageLabels.like_to_order}
            </p>
            <img
              src={Search}
              alt="search"
              onClick={() => setCategorySearch(true)}
            />
          </div>
          <div className="grid grid-flow-row w-full grid-cols-2 place-items-center gap-10p px-md pb-20">
            {categoryList.map((category) => {
              // console.log(category);
              return (
                <Dishes
                  key={category.category_id}
                  category={category}
                  languageLabels={languageLabels}
                  loading={loadingCategories}
                />
              );
            })}
          </div>
          <BottomNavigation
            languageLabels={languageLabels}
            isLoyalty={settings.enable_reward_points_functionality}
          />
          {/*  </div> */}
        </div>

为什么位置粘性在我的代码中不起作用？

Why position sticky is not working in my code?

html

css

css-position

tailwind-css