I'm currently in the process of creating a website where text appears on the left side with an accompanying image on the right. The challenge I'm encountering is ensuring that as users scroll, the image adjusts dynamically based on the associated text. Although everything works smoothly on desktop, there are difficulties in keeping the image sticky and always on top during responsive mode. When the screen size shrinks, the image ends up shifting below the text. Here's the code snippet I have been working on:
document.addEventListener("DOMContentLoaded", function() {
const artwork = document.getElementById('artwork');
const sections = document.querySelectorAll('.content-section');
const screenWidth = window.innerWidth; // Get screen width
const transformations = [
{ scale: 1, translateX: 0, translateY: 0 }, // Section 1
{ scale: 2.2, translateX: 60, translateY: -30 }, // Section 2
{ scale: 1.5, translateX: 20, translateY: 80 }, // Section 3
{ scale: 2, translateX: -100, translateY: -200 } // Section 4
];
const scrollHandler = () => {
const scrollPosition = window.scrollY + window.innerHeight / 2;
sections.forEach((section, index) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.offsetHeight;
if (scrollPosition > sectionTop && scrollPosition < sectionTop + sectionHeight) {
const transform = transformations[index];
artwork.style.transform = `scale(${transform.scale}) translate(${transform.translateX}px, ${transform.translateY}px)`;
// Hide text on small screens
if (screenWidth <= 768) {
section.style.display = 'none';
}
} else {
// Restore text visibility
section.style.display = 'block';
}
});
};
window.addEventListener('scroll', scrollHandler);
scrollHandler(); // Initial call to set the correct transform on load
});.imscroll {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.grid-test {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 100%;
}
.text-section {
position: relative;
z-index: 1;
}
.interactive-container {
position: sticky;
top: 20px;
height: 80vh;
overflow: hidden;
z-index: 2; /* Increase z-index */
padding-bottom: 20px; /* Add padding */
}
.interactive-container img {
position: absolute;
width: 100%;
height: auto;
transition: transform 0.3s ease;
}
.content-section {
padding: 20px 0;
border-bottom: 1px solid #ddd;
}
/* Responsive Design */
@media (max-width: 768px) {
.grid-test {
display: flex;
flex-direction: column;
}
.interactive-container {
position: relative; /* Change position to relative
top: 0;
height: auto; /* Reset height */
}
.interactive-container img {
position: absolute;
width: 100%; /* Make the image width 100% of its container */
height: auto; /* Maintain aspect ratio */
transition: transform 0.3s ease;
}
@media (max-width: 768px) {
.interactive-container {
z-index: 2; /* Increase z-index */
padding-bottom: 10px; /* Adjust padding for smaller screens */
}
}<div class="imscroll">
<div class="grid-test">
<div class="text-section">
<section class="content-section" id="section1">
<h2>Section 1</h2>
<p>Paragraph1 sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.</p>
</section>
<section class="content-section" id="section2">
<h2>Section 2</h2>
<p>Paragraph1 sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.</p>
</section>
<section class="content-section" id="section3">
<h2>Section 3</h2>
<p>Paragraph1 sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan ...</p>
</section>
<section class="content-section" id="section4">
<h2>Section 4</h2>
<p>... incididunt dolor consectetur adipiscing elit. Phasellus euismod lorem pharetra leo rhoncus condimentum...</p>
</section>
</div>
<div class="interactive-container">
<p style=" margin-top: 100px;"><img src="http://www.reedyrace.com/images/b64d-chassis.jpg" alt="Artwork" id="artwork" style=" border: 1px solid gray;" /></p>
</div>
</div>
</div>