Issue with Sticky Image Section Not Working

Hello,

Could you please share the product URL? I’ll check it out for you.

Thank you!

Thanks For the reply
Product Url

• This reply was modified 1 month ago by amtechnosys.

Hello,
Please add the following Javascript on your site.

window.addEventListener('scroll', function() {
    const leftColumn = document.querySelector('.nickx_product_images_with_video');
    const rightColumn = document.querySelector('.entry-summary');
    const newSection = document.querySelector('.container-class');
    const clientHeight = document.querySelector('.slider.nickx-slider-for .nslick-slide.nslick-current.nslick-active').clientHeight;
    leftColumn.style.maxHeight = clientHeight+'px';
    let rightBottom = rightColumn.getBoundingClientRect().bottom;
    let newSectionTop = newSection.getBoundingClientRect().top;
    
    if (rightBottom > 0 && newSectionTop > window.innerHeight) {
        leftColumn.style.position = 'sticky';
        leftColumn.style.top = '10px'; // Adjust as needed
    } else {
        leftColumn.style.position = 'static';
    }
});

Hello,

I apologize for the delay in responding and thank you very much for providing the code. I have added the code and the sticky feature is working. However, when I scroll down towards the bottom, a white space appears.

You can check the product link here: link. Additionally, I’ve included a video link for your reference, where you can see the issue happening. Please have a look at it.

Thank you again for your help.

Hello
Could you please respond at your earliest convenience? I am awaiting your reply.
Thank You

Hello,
Please remove the previously provided script and add the following CSS to your site:

.single-product .product-entry-wrapper.ct-constrained-width .images.nickx_product_images_with_video{
    position: sticky !important;
    top: 15px;
}

Hello,

Thank you so much for responding again. As per your suggestion, I removed the old code and added the new CSS code you provided, but it didn’t work, and the sticky feature wasn’t functioning. However, when I added both the old code and the new code together, everything started working perfectly.

I wanted to confirm if there would be any issues with keeping both codes in place. Please let me know.

Thank you!

Hello,

Please clear your browser cache or try checking in a different browser. It’s working fine on my end.

Thank You.

Thank you for the reply. It works! However, if I add the code

window.addEventListener('scroll', function() {    const leftColumn = document.querySelector('.nickx_product_images_with_video');    const rightColumn = document.querySelector('.entry-summary');    const newSection = document.querySelector('.container-class');    const clientHeight = document.querySelector('.slider.nickx-slider-for .nslick-slide.nslick-current.nslick-active').clientHeight;    leftColumn.style.maxHeight = clientHeight+'px';    let rightBottom = rightColumn.getBoundingClientRect().bottom;    let newSectionTop = newSection.getBoundingClientRect().top;        if (rightBottom > 0 && newSectionTop > window.innerHeight) {        leftColumn.style.position = 'sticky';        leftColumn.style.top = '10px'; // Adjust as needed    } else {        leftColumn.style.position = 'static';    }});

or

.single-product .product-entry-wrapper.ct-constrained-width .images.nickx_product_images_with_video{
position: sticky !important;
top: 15px;
},
it functions correctly. But when I only add the CSS code, it doesn’t work. I have cleared the cache and checked everything, and it seems that when I only add the JavaScript code, it does not work either.