body { margin: 0; padding: 0; } .container { display: flex; position: relative; } .static-text { position: fixed; left: 20px; top: 20px; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .product-placeholder { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; padding: 20px; } .product-image { width: 200px; height: 200px; background-color: #f0f0f0; margin: 10px; } document.addEventListener("scroll", function () { const staticText = document.querySelector(".static-text"); const yOffset = window.pageYOffset; // Adjust the top position of the static text based on scroll offset staticText.style.top = (20 - yOffset) + "px"; });