STICKY IMAGE SCROLL DOWN

Highlighted
New Member
10 0 0

Hi Friends!

How can I make product images sticky on scroll on Envy template?

 

Thanks for help!

0 Likes
Highlighted
Excursionist
80 19 19

Hi there

If you paste this CSS at the bottom of your theme.scss file you should get close to the right result:

@media screen and (min-width: 769px) {
    .product-single .grid__item.text-center {
        position: sticky;
        position: -webkit-sticky;
        position: sticky;
        top: 20px;
    }
}

 

0 Likes
Highlighted
New Member
10 0 0

Thanks for reply but it doesn't work!
Any other solutions?

0 Likes
Highlighted
Excursionist
80 19 19

Can you link to the site if possible - with the password if necessary?

It's sometimes difficult to know without looking exactly at your site.

0 Likes
Highlighted
New Member
10 0 0

Of course, this is the link, you don't need password

 

infinitycosmetics-it.myshopify.com

0 Likes
Highlighted
Excursionist
80 19 19

Ah I see now - there was a sneaky overflow: hidden rule on the body that was causing the stickyness to fail (and your theme had different CSS selectors).

Try with this code at the bottom of your theme.scss:

#main-body {
    overflow-x: unset;
}
@media screen and (min-width: 769px) {
    .rio-media-gallery {
        position: sticky;
        position: -webkit-sticky;
        position: sticky;
        top: 10px;
        overflow: initial;
    }
}

That should get you fairly close to what you need.

0 Likes
Highlighted
New Member
10 0 0

Also this code doesn't work

0 Likes
Highlighted
Excursionist
80 19 19

Hi

This is definitely at the very bottom of the theme.scss file yes?

It does appear to be working when I add that CSS in developer tools.

Can you take a screenshot of where it appears in the file so I can check it's in the correct file and format?

0 Likes
Highlighted
Excursionist
80 19 19

It seems to work on some pages and not others.

We may need to do some more work on the product Liquid template to make this more consistent.

For example:

https://infinitycosmetics-it.myshopify.com/collections/labbra/products/matt-fix-matt-lipcolor <- Sticky image does work on this page

https://infinitycosmetics-it.myshopify.com/collections/best-sellers/products/anti-aging-crema-viso <- Sticky image does not work on this page

Fundamentally it looks like they have different ways of displaying media.

Perhaps one has a video or similar? It always seems to show a small loading spinner underneath the main image?

0 Likes
Highlighted
New Member
10 0 0

Hi, I don't have any video on product pages. The loading can be any app?

0 Likes