The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Problem with CSS Sticky position
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.
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.
Thanks a lot. I see, you’ve been a great help.