How I can make Magento 2 product-info-main sticky like cart sidebar when scroll to down?

Question

I want to make an upper bar as in https://www.atma.com.ar/molinillo-electrico-atma-mc8141n.html that contains the product info and the "add-to-cart" button, and that appears only when I scroll under the add-to-cart button and remains fixed under the header during the scroll.

Help me please.

Answer 1

Use this js:- https://www.jqueryscript.net/other/jQuery-Plugin-For-Creating-Sticky-Html-Elements-Sticky-Kit.html

example site:- https://bedwintokyo.com/coach-jacket-jill-20ab5539.html

May be help for you.

Answer 2

For Sticky Product page Image Some time issue with sticky properties so We can used jquery in direct phtml file for magento 2.

<script>

require([ "jquery" ], function($){
    $(document).ready(function(){
            let mediaTop = $('.product.media').offset().top;
            let mediaHeight = $('.product.media').height() - 52;
            let mediaBottom = mediaTop + mediaHeight;
            $(window).scroll(() => {
                var width = $(window).width();
                if(width > 1024) {
                        if($(window).scrollTop() >= 200){
                            let infoBottom = $('.product-info-main').offset().top + $('.product-info-main').height();
                            if(mediaBottom <= infoBottom) {
                                let scrollTop = $(window).scrollTop();
                                let mediaTopAdjust = Math.max((scrollTop - mediaTop), 0);
                                let newMediaBottom = mediaTop + mediaTopAdjust + mediaHeight;
                                let bottomHeightDiff = infoBottom - mediaBottom;
                                if(newMediaBottom <= infoBottom) {
                                    $('.product.media').css('top','0');
                                    $('.product.media').css('position', 'fixed');
                                } else {
                                        $('.product.media').css('top', bottomHeightDiff + 'px');
                                        $('.product.media').css('position', 'relative');
                                    }
                            }
                        } else {
                                $('.product.media').css('position', 'relative');
                                $('.product.media').css('margin-top', "");
                            }
                }
            });
    });
});

</script>