Position Sticky with overflowing side navigation

Question

I'm having an issue here where I constantly have an overflow-x whenever I set my side navigation off screen using translate. The real problem is that if I set an overflow-x:hidden; to all the ancestors div. It will stop my position sticky logo to work.

I've done my research and some of the following recommendation for fix was to add an overflow-x:hidden to the body itself and it would work. However it doesn't work in my case since there is a side navigation that is off screen.

The odd thing is that after adding overflow-x:hidden to the body. It fixes the overflow issue and the sticky logo is working but only on desktop mode. The moment I switch to mobile (Ctrl + Shift + M on Firefox and enable touch simulation), the overflow-x starts to scroll once again and the position sticky doesn't stick.

Here is a code snippet that I've found online in which I've added an additional side nav on the right so simulate my case.

HTML

<body>
  <main>
    <div class="overflow-x-hidden">
      <h1>I want to be sticky!</h1>
      <div class="sidenav"></div>
      <div class="tall"></div>
    </div>
  </main>
</body>

CSS*

body {
  overflow-x: hidden;
  position: relative;
}

.overflow-x-hidden {
  border: 1px solid blue;
}

h1 {
  background: palevioletred;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.tall {
  background: linear-gradient(to bottom, paleturquoise, white);
  height: 300vh;
  width: 100%;
}

.sidenav{
  width: 250px;
  height: 100%;
  background: black;
  position: absolute;
  right: 0;
  transform: translateX(100%)
}

Here are some of the similar issues that I've found.

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

body { overflow-x: hidden; } breaks position: sticky

https://github.com/w3c/csswg-drafts/issues/865

https://bugzilla.mozilla.org/show_bug.cgi?id=1329203

score 0 · Answer 1 · answered Sep 27 '22 at 11:54

For anyone struggling with this issue, I have similar issues and found a solution at https://stackoverflow.com/a/71268988/14151733.

Setting the overflow-x property to value clip helped me achieve position sticky and prevent scrolling.

Here is more explanation in this article

CSS

.overflow-x-clip {
    overflow-x: clip;
}

.sticky {
    position: sticky;
    top: 0;
}

HTML

<body class="overflow-x-clip">
    <nav class="sticky">
        ...
    </nav>
</body>

Position Sticky with overflowing side navigation

1 Answers1