Javascript 滚动时，如何使一个项目div移动而另一个项目div不移动？

我有这个网站：

我希望用户能够像往常一样滚动页面上的任何地方，但我希望文本保持在右边的相同位置，同时图像继续向下移动。苹果网站上也有类似的想法，屏幕右侧的杂志比左侧的杂志下移得快。如何使用纯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>

看看这些照片

您可以使用css定位，并为文本元素赋予值

sticky

#lookAtThesePhotos {
  position: sticky;
  top: 0px;
}

霍拉 看看这些照片 “查看这些照片”文本最初将滚动，直到显示在窗口顶部。然后它保持固定在那里，图像滚动浏览

代码笔链接：

当span元素处于0px时，它将表现为

fixed

元素。其余时间，它将表现为相对定位。 请注意，

sticky

是

position

属性的一个相对较新的值，请检查是否支持它

有关更多信息，请参阅：

---

您可以通过添加

位置来实现：固定到您的文本。即使在滚动条上，它也会固定文本的位置。您只需更改一些样式即可调整显示

这是它的运行代码段



看看这些照片
你能提供你的css代码吗。但是基本上，只要添加
display:fixed
就可以了。@JuliusGuevarra所有的css代码都是内联的；
position:fixed
的问题在于它没有考虑到该部分上面和下面的其他部分。换言之，这些词将出现在所有章节中，只是问，你想达到的是视差效果吗？
<h1>Hola</h1>

<div style="display: flex; justify-content: space-between; padding: 40px;">
  <div>
    <span style="font-size: 80px; font-weight: bold; font-family: 'Raleway';" id="lookAtThesePhotos">Look at these photos</span>
  </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>