2

I'm trying to make 2 sidebars sticky so when you scroll there they'll follow until the user reaches the bottom of the page.

This is easy to implement in other programs, but it's not working in the app I'm editing right now.

I've read all that I could on what could cause this error and this is what I've tried so far to solve this: changed browsers (chrome and firefox) added flexstart to the sticky component included top: value added height: auto removed flex from the parent containers and tried table, block, etc.

The weird thing is that fixed works, but not sticky. I could always create a function to test if it's at that components height then add fixed at that height. I'd rather not do that since sticky is a much easier solution.

This is a big project so there's a lot of code, I couldn't possibly fit it all in this post so I'll just include the element with the issue.

div.sticky {
  position: sticky;
  top: 0;
  justify-content: flex-start;
}
Matt Brody
  • 1,473
  • 3
  • 14
  • 23
  • Which browser versions are you using? `position: sticky` has notoriously [**bad support**](https://caniuse.com/#feat=css-sticky). It still has issues in Chrome, and isn't supported in browsers like IE at all yet. – Obsidian Age Jun 04 '19 at 23:45
  • I've tried chrome and firefox and they're both not working – Matt Brody Jun 04 '19 at 23:46

1 Answers1

18

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.

Matt Brody
  • 1,473
  • 3
  • 14
  • 23
  • 1
    "Note that a sticky element 'sticks' to its nearest ancestor that has a 'scrolling mechanism' (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior (see the [Github issue on W3C CSSWG](https://github.com/w3c/csswg-drafts/issues/865))." -- [position#sticky](https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky) Also see [body { overflow-x: hidden; } breaks position: sticky](https://stackoverflow.com/questions/47095596/). – showdev Jun 04 '19 at 23:59
  • In my case I had `overflow: auto` in Bootstrap's class `table-responsive` – Francisco Gomes Jan 22 '23 at 15:38
  • Yes, You are right. I had `Overflow-x: hidden;` in my body class. I deleted it and it worked. You saved my time. Thanks. – umesh kumar bedi Apr 04 '23 at 16:19