Sticky Product Images Debut

Solved
mb_18
Excursionist
20 0 7

Hello everyone,
I'm using the Debut Theme and I want my product images to be sticky. If you scroll down the product thumbnails should always be visible until another element / section comes up there. How can I do that?

Website: https://customhunters.myshopify.com/products/car-artwork    PW:  blieff

satsinghrana
Shopify Partner
126 11 21

Hi @mb_18 

To make the product images sticky we need to add JS code to detect the page scroll, Also to set a parameters on which stage we need to make them sticky as well.

It required CSS and Javascript code to do this. Following is the pretty basic code to achieve this : 

<style>
.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}
</style>
<script>
$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});
</script>

 

Or if you need any other help feel free to contact on the below email thanks!

Have a great day!

 

 

 

If helpful then please Like and Accept Solution
Hire for Custom Shopify Solutions, Apps development or Any kind of Web development work.
Contact : satsinghrana1@gmail.com
See our Shopify Apps: HERE
0 Likes
KetanKumar
Shopify Partner
17039 1848 6375

@mb_18 

https://codepen.io/clairecodes/pen/bvWKdr

https://codepen.io/lryan/pen/OvdOJL

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
HardikDavra
Shopify Partner
1849 293 809

This is an accepted solution.

Please place this code at the end of theme.scss

@media only screen and (min-width: 750px) {
.drawer-page-content {
overflow: unset;
}
.product-single__media-group {
    position: -webkit-sticky;
    position: sticky;
    top: 7%;
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
HardikDavra
Shopify Partner
1849 293 809

Thank you for the update.

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
Ninthony
Shopify Partner
1792 258 704

Haha I was literally just working on this and I refreshed and it was working : )

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
mb_18
Excursionist
20 0 7

Thank you very much to all