Position Sticky Not Working with Body{ Overflow-X: Hidden; }

Position sticky not working with body{ overflow-x: hidden; }

As far as I know, you cannot use it by now.
It is still only partially supported in some browsers.

When you want to know how far it is with this feature, I can advise you to check it on caniuse.com.

Sticky Feature: https://caniuse.com/#feat=css-sticky

How does the position: sticky; property work?

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

...

You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
[source: MDN]

So in your example, you have to define the position where it should stick in the end by using the top property.

html, body {
  height: 200%;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

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

CSS nested sticky section inside main element with overflow-x: hidden

Position sticky normally doesn't work if parent element have overflow hidden property.
Instead of main try to give "overflow-x: hidden" to the body

body
          {
              overflow-x: hidden;
          }

Sticky thead on page scroll and overflow-x not working

Your table header IS sticky. It sticks to the top (at the same y pos) of the table regardless of how small/big the table is. It's the left position that isn't fixed, but you've added scrolling, so you're gonna want to see the table header 2 or 3 as appropriate on scrolling across.

To illustrate the point, I've shortened your outer box to 125px and added overflow-y:scroll, so you can see the effect. Scroll down and you will see the th stay in position while the data rolls up and down.

You may want to narrow the width of the box so that the down arrow is visible without having to scroll across.

Hope this clarifies things a bit for you

* {
  margin: 0;
  box-sizing: border-box;
}

.outer_box5 {
  margin: 0 auto;
  width: 1200px;
  height:125px;
  overflow-x:scroll;
  overflow-y:scroll;
  background: #5ffc6c;
}

.table-fixed {
  position: relative;
  border-collapse: collapse;
  width: 2400px;
}

.table-fixed thead th {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999;
  background-color: #000;
  color: #fff;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /*-- inline css in css section--*/
  </style>
</head>

<body>
  <div style="width: 100%; height: 500px; background: #ffd18d;"></div>
  <div class="outer_box5">
    <table class="table-fixed">
      <thead>
        <tr>
          <th>Table Header 1</th>
          <th>Table Header 2</th>
          <th>Table Header 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div style="width: 100%; height: 500px; background: #ffd18d;"></div>
</body>

</html>

---

Related Topics