Position Sticky not working?

[jeremy58]

I have this test post and I am trying to add a position:sticky " share" bar (located below the gallery).

It’s inside a bootstrap column.

I added the css below, but it doesn’t “stick” in any browser. I’m sure I am doing something wrong, but I don’t know what…

#share-set  {position:sticky;position:-webkit-sticky;  top:85px}

[Erik_J]

One of the ancestors has overflow hidden, try remove that and see if it works:

#td-outer-wrap {
    overflow: hidden;
}

See the specs:

https://www.w3.org/TR/css-position-3/#sticky-pos

Edit)
Found a good description of this:
https://uxdesign.cc/position-stuck-96c9f55d9526?gi=fbfcb7b14841

In this article, I want to explore the shortcomings of position: sticky; — specifically how we might be able to think up a creative technique when working with overflows, which causes frustration when working with the native solution.

[PaulOB]

@Erik_J

One of the ancestors has overflow hidden, try remove that and see if it works:

Yes you can’t have a sticky element inside an overflow:hidden parent. You can have it inside an overflow:scroll parent but the parent would need a fixed height and actually have scrollbars.

In the OPs example removing the overflow:hidden from the td-outer-wrap as you suggest will allow the element to become sticky. The overflow:hidden on that element is unnecessary anyway and seems to be in place to hide the fact that some elements in the header have been oversized. If they are sized correctly the overflow:hidden would not be needed.

[jeremy58]

Interesting… The td-outer-wrap overflow css actually comes from the theme…

The header was actually imported from the theme developers demo “repository”…

[RyanReese]

@jeremy58

position:sticky;position:-webkit-sticky;

Also, you want to swap these orders. You want vendor prefixes first. That way, if the position: sticky is supported, it can be used instead of the vendor prefix version.