How to Scroll a left side product image with the contents of right side of the pdp page without effecting pdp slider function

when a customer scrolls a product in pdp page to fill the custimization product details product image will be at top and customer have to scroll to top to see the custmaized thing by using this method we can solve this problem.

Script:

 var layoutOnScroll =  $(document);
                        layoutOnScroll.on("scroll", function(e) {
                        var personalizeDisplayType = $('.pdp-configurator-block').css('display');
                        if ((window.innerWidth > 992) && (personalizeDisplayType ==="block")) {
                            var calculatedDocHeight = ($(document).height() - $(document).scrollTop());
                            if ((layoutOnScroll.scrollTop() > 420) && (calculatedDocHeight > 3200)) {
                                $(".product-details-image-gallery").addClass('personalization-product-image');
                                $(".personalization-product-image").css('top', (layoutOnScroll.scrollTop()-180) + 'px')
                            }else{
                                var mainContainerHeight = $('.product-details-full-main-content').height()
                                var productImageTop = parseInt($(".product-details-image-gallery").css('top').split('px')[0]);
                                if (mainContainerHeight < productImageTop+ 700) {
                                    $(".product-details-image-gallery").addClass('personalization-product-image');
                                    $(".personalization-product-image").css('top', (mainContainerHeight-800) + 'px')
                                }
                                $(".product-details-image-gallery").removeClass('personalization-product-image');
                            }
                        }else{
                            $(".product-details-image-gallery").css('top', '0px')
                        }
                        })