Why Is 'Position: Sticky' Not Working With Core Ui'S Bootstrap Css

Why is 'position: sticky' not working with Core UI's Bootstrap CSS

The issue is the use of overflow inside .app-body. It's a bit tricky but there should be no overflow property set to any element between the element that has the scroll and the sticky element.

Here is a basic example to illustrate. The scroll is on the viewport and we have a wrapper with overflow:hidden (or even auto) thus the sticky behavior won't work.

.container {  display:flex;  align-items:flex-start;  border:2px solid green;}.content {  flex:1;  height:200vh;  background:red;  margin:10px;}.sticky {  flex:1;  height:100px;  background:blue;  margin:10px;  position:sticky;  top:0;}
.wrapper {  overflow:hidden;  border:2px solid red;}

<div class="wrapper">  <div class="container">    <div class="sticky"></div>    <div class="content"></div>  </div></div>

Why position sticky is not working in my code?

Its because you have overflow-x-hidden in parent . sticky doesn't work if parent overflow is 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>
      )}

Bootstrap sticky-top on sidebar column doesn't work

Position sticky will not work if any of the parent containers of the sticky element use overflow:hidden. Removing the overflow-hidden class from the container allows the sticky-top to work.

<div class="container min-vh-100">
    <nav class="navbar navbar-light navbar-expand">
        ..
    </nav>
    <div class="row">
        <div class="col-sm-8 content pt-4">
            ...
        </div>
        <div class="col-sm-4">
            <div class="menu sticky-top p-3 bg-light">
                <h5 class="text-primary">Sticky menu</h5>
                <div class="nav flex-column">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/9Nf6pOa7TN

Why does position: sticky; not work in react?

The Body element had Overflow-x: hidden; and if I removed it works.

Not sure if I can remove that, but that's what's causing my problem.

two-column sticky flexbox scrolling not working

Remove overflow:auto on parent container of sticky element to make stickiness work

.wrapper {
  display: flex;
  flex-flow: row wrap;
  gap: 2em;
  justify-content: flex-start;
  height: auto;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.aside-1 {
  position: -webkit-sticky;
  position: sticky !important;
  background: gold;
  top: 0 !important;
  align-self: flex-start;
}

.aside-2 {
  background: hotpink;
  height: 900px;
  top: 0;
}

@media all and (min-width: 300px) {
  .aside { flex: 1 0 0; }
}

.other-content{
  margin-top: 2rem;
  height: 20rem;
  width: 100%;
  background: red;
  position:sticky;
  top:0;
}

<section class="page-width">


<div class="wrapper">
<aside class="aside aside-1"><img width="100%" src="https://cdn.shopify.com/s/files/1/0044/2852/9698/files/242370040_4238706352865614_2798039132201744827_n.jpg"> Aside 1
</aside>
  <aside class="aside aside-2">
  Aside 2
  </aside>
</div>
 <div class="divider"></div>
  <div class="other-content"></div>
</section>

Sticky accordion header whilst open

I have now used the following CSS class which has made the open accordion header sticky, however the header appears behind the accordion body

.accordion-header.sticky {
position: -webkit-sticky;
position: sticky;
top: 10px; }

Why Is 'Position: Sticky' Not Working With Core Ui'S Bootstrap Css