Problem with CSS Sticky position

[guillaume]

Hello ,

I’m having a hard time making “Sticky” position work on my div ID “Product Info” as seen on this page: https://css-tricks.com/position-sticky-2/

Here is the URL of the page :
https://8ljrib4sm1t7tp24-2268856383.shopifypreview.com/products/bamboo-toothbrushes

And the added CSS :

#productInfo-product {
margin-top: -55px;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0;
}

I would gladly have your opinion on the problem, thanks a lot.

[uxfed]

It’s working. It just won’t do anything unless the other column has more content, otherwise your info block has nowhere to go.

To confirm this, I went in to devtools and just put lots of content in the left column and started scrolling.

[guillaume]

Thanks a lot. I see, you’ve been a great help.

[Author]

Posts