<style>
.product-template {
display: flex;
align-items: flex-start;
position: relative;
}
.left {
width: 50%; /* Adjust as needed */
position: sticky;
top: 0;
height: 100vh; /* Full viewport height */
display: flex;
align-items: center;
justify-content: center;
}

.left img {
max-width: 100%;
height: auto;
}

.right {
width: 50%; /* Adjust as needed */
overflow-y: auto;
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const left = document.querySelector(“.left”);
const right = document.querySelector(“.right”);

// Function to handle the scroll sync
function handleScroll() {
const leftBottom = left.getBoundingClientRect().bottom;
const rightBottom = right.getBoundingClientRect().bottom;

if (leftBottom <= window.innerHeight) {
right.style.overflowY = “auto”;
} else {
right.style.overflowY = “hidden”;
}
}

// Add scroll event listener
window.addEventListener(“scroll”, handleScroll);
});
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *