1

Check this image: enter image description here

This is my product details page. Image on the left is moving up with scrolling. I don't want it to move up. I want too always be fixed on the right as long there is a text on the right. If text on the right overflow then image moves as well.

I would like to have the same logic as apple.com page has. Anyone knows how to acchieve that? What is the best way of doing it? Didn't find any good tutorial online.

1 Answer 1

1

You can use the Sticky widget from Magento.

Here is a link to the official documentation : https://developer.adobe.com/commerce/frontend-core/javascript/jquery-widgets/sticky/

Here is an example of an implementation with the data-mage-init :

<div class="block-bundle-summary"
     data-mage-init='{"sticky":{"container": ".product-add-form"}}'>
     [...]
</div>

And here if you wish to use it in a js file :

$('.sticky-element').sticky({
    container: '.sticky-parent'
});

Note the use of the container option : it allows you to tell until where you want your element to stay sticky.

In your case, the container should be the div which contains both the image and the text. The image will stay sticky until you scroll pass this div, and then keep scrolling up after the text on the right has been scrolled.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.