How to make an element sticky?

[SantosBaez]

Hello!

I would like to make the element below sticky as I scroll down the page. It looks like the element on the left (the selection of coffees) is sticky, but I would like the picture to be sticky instead.

The pages I would like to edit are the following:
https://coffeeinboxes.com/products/coffee-box-of-4

https://coffeeinboxes.com/products/coffee-box-of-6

https://coffeeinboxes.com/products/coffee-box-of-9

Any help with this is greatly appreciated!

Thanks!

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @SantosBaez 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.grid__item.product__media-wrapper.small-hide {
    position: sticky !important;
    top: 0 !important;
    height: fit-content !important;
}

</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[SantosBaez]

Hello!

Thanks for replying! This code worked, however, could we add padding/margin to the top so there's some space between the image and the top of the browser?

Thanks!

[BSS-TekLabs]

<style>
.grid__item.product__media-wrapper.small-hide {
    position: sticky !important;
    top: 20px !important;
    height: fit-content !important;
}
</style>

[BSS-TekLabs]

Can you try this code @SantosBaez 

[BSS-TekLabs]

You can increase 20px to a larger number if you want more distance and vice versa @SantosBaez 

[SantosBaez]

Awesome! This worked!

Thank you!!

[BSS-TekLabs]

Glad to help you. Have a good day @SantosBaez .

[TheUntechnickle]

Hello there!

I'm happy to help you make the media gallery section sticky on your product page. I've prepared some CSS and JavaScript code that you can add to your theme to achieve this effect. Here it is:

Add this to base.css in your theme: 

.product__media-wrapper {
  position: sticky;
  top: 20px;
  z-index: 1000;
  height: fit-content;
}

@media screen and (max-width: 749px) {
  .product__media-wrapper {
    position: static;
  }
}

Here's the JS code, please add this to your theme.liquid or theme script file.

<script>
let mediaWrapper = document.querySelector('.product__media-wrapper');
let productInfo = document.querySelector('.product__info-wrapper');
let header = document.querySelector('header');

function updateSticky() {
  if (window.innerWidth <= 749) {
    mediaWrapper.style.position = 'static';
    return;
  }

  let headerHeight = header ? header.offsetHeight : 0;
  let productInfoHeight = productInfo.offsetHeight;
  let mediaWrapperHeight = mediaWrapper.offsetHeight;
  let windowHeight = window.innerHeight;

  if (productInfoHeight > mediaWrapperHeight && windowHeight > mediaWrapperHeight + headerHeight + 40) {
    mediaWrapper.style.position = 'sticky';
    mediaWrapper.style.top = `${headerHeight + 20}px`;
  } else {
    mediaWrapper.style.position = 'static';
  }
}

window.addEventListener('scroll', updateSticky);
window.addEventListener('resize', updateSticky);
updateSticky();
</script>

The JavaScript serves several important purposes that can't be achieved with CSS alone:

1. Responsive behavior: It disables the sticky effect on mobile devices (screen width <= 749px) where scrolling behavior is different.
2. Dynamic header adjustment: It accounts for the header height, which may change on different pages or as the user scrolls.
3. Conditional application: It only applies the sticky effect when the product info section is taller than the media gallery. This prevents unnecessary stickiness on short product pages.
4. Screen size consideration: It ensures the sticky effect is only applied when there's enough screen height to display the media gallery comfortably.
5. Real-time updates: It adjusts the behavior as the user resizes the window or rotates their device.

This code will make the media gallery sticky on desktop views while keeping it static on mobile devices. It also adjusts for your header height and ensures the sticky behavior only applies when it makes sense for your layout.

Let me know if you need any further assistance or have any questions about implementing this code. I'm here to help!

Thanks,
Shubham | Untechnickle