javascript - 如何在滚动时让一个元素 div 移动而另一个不移动？

Question

我有这个网站:

而且我希望用户能够像往常一样滚动页面上的任何位置，但我希望文本保持在右侧的同一位置，而图像继续向下移动。在 Apple 网站上可以找到类似的想法 https://www.apple.com/apple-news/屏幕右侧的杂志比左侧的杂志向下移动得更快。如何使用纯 css 和 js 实现此目的。值得注意的是，这不是网站的唯一部分。上面和下面会有部分。

这是我的 html:

<div style="display: flex; justify-content: space-between; padding: 40px;">
        <div>
            <div>
                <span style="font-size: 80px; font-weight: bold; font-family: 'Raleway';" id="lookAtThesePhotos">Look at these photos</span>
            </div>
        </div>
        <div style="width: 50%;">
            <img style="float: right;" src="https://mv-hacks.com/images/event/hackers.jpg">
            <img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
            <img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
            <img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
        </div>
    </div>

Answer 1

您可以通过在文本中添加 position: fixed; 来实现。即使在滚动时，它也会固定文本的位置。您只需更改一些样式即可调整显示。

这是它的运行片段。

<div style="display: flex; justify-content: space-between; padding: 40px;">
        <div>
            <div>
                <span style="font-size: 80px; font-weight: bold; font-family: 'Raleway'; position: fixed;width: 50%;" id="lookAtThesePhotos">Look at these photos</span>
            </div>
        </div>
        <div style="width: 50%;">
            <img style="float: right;" src="https://mv-hacks.com/images/event/hackers.jpg">
            <img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
            <img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
            <img style="float: right;" src="https://mv-hacks.com/images/event/mrnguyen.jpg">
        </div>
    </div>