如何确保响应式图文布局滚动时图片始终保持粘性置顶

问题描述 #

开发的左文右图布局网页，桌面端滚动时图片可随文本动态变换样式，但屏幕缩小到响应式模式后，图片无法保持粘性置顶，反而移动到文本下方。

核心问题分析 #

1. 原响应式CSS中将.grid-test改为flex-direction: column，且HTML结构中文本区在前，图片区在后，导致图片默认排在文本下方
2. 原代码把.interactive-container的position设为relative，直接取消了粘性定位
3. JS中screenWidth仅在页面加载时获取一次，窗口 resize 时不会更新，导致移动端逻辑失效

修复代码 #

1. 修正CSS（保留粘性+调整布局顺序） #

.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;
    padding-bottom: 20px;
}

.interactive-container img {
    position: absolute;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.content-section {
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

/* 修正后的响应式样式 */
@media (max-width: 768px) {
    .grid-test {
        display: flex;
        flex-direction: column;
    }

    .interactive-container {
        position: sticky; /* 保留粘性定位 */
        top: 20px;
        height: 50vh; /* 适配移动端高度 */
        overflow: hidden;
        z-index: 2;
        margin-bottom: 20px;
        order: -1; /* 让图片容器在flex布局中排在最前面 */
    }

    .interactive-container img {
        position: absolute;
        width: 100%;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 居中图片，避免变换偏移 */
        transition: transform 0.3s ease;
    }
}

2. 修复JS（实时更新屏幕宽度+优化文本显示） #

document.addEventListener("DOMContentLoaded", function() {
    const artwork = document.getElementById('artwork');
    const sections = document.querySelectorAll('.content-section');
    let screenWidth = window.innerWidth; // 改为let允许更新

    const transformations = [
        { scale: 1, translateX: 0, translateY: 0 },
        { scale: 2.2, translateX: 60, translateY: -30 },
        { scale: 1.5, translateX: 20, translateY: 80 },
        { scale: 2, translateX: -100, translateY: -200 }
    ];

    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];
                // 叠加图片居中transform与动态变换
                artwork.style.transform = `translate(-50%, -50%) scale(${transform.scale}) translate(${transform.translateX}px, ${transform.translateY}px)`;

                // 移动端仅显示当前文本
                if (screenWidth <= 768) {
                    sections.forEach(sec => sec.style.display = 'none');
                    section.style.display = 'block';
                }
            }
        });
    };

    // 添加窗口resize监听，实时更新屏幕宽度
    window.addEventListener('resize', () => {
        screenWidth = window.innerWidth;
        scrollHandler();
    });

    window.addEventListener('scroll', scrollHandler);
    scrollHandler(); // 初始化调用
});

3. 优化HTML（移除多余标签） #

<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. 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="section4">
                <h2>Section 4</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>
        </div>
        <div class="interactive-container">
            <img src="http://www.reedyrace.com/images/b64d-chassis.jpg" alt="Artwork" id="artwork" style="border: 1px solid gray;" />
        </div>
    </div>
</div>

修复效果说明 #

• 移动端图片保持粘性置顶，滚动时仍随文本动态变换样式
• 实时适配窗口尺寸变化，无需刷新页面
• 移动端仅显示当前滚动到的文本内容，提升阅读体验

内容的提问来源于stack exchange，提问作者newuser