Question

我有这个网站：

我希望用户能够像往常一样滚动页面上的任何位置，但是我希望文本在图像继续向下移动的同时保持在右侧的同一位置。在苹果公司的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

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

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

<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>

查看这些照片文本最初将滚动，直到显示在窗口顶部为止。然后它在那里保持固定，图像滚动通过

Codepen链接：https://codepen.io/uchihamalolan/pen/oOYJba

当span元素为0px时，它将表现为fixed元素。其余时间，它会表现为相对定位。请注意，sticky是position属性的一个相对较新的值，请检查其是否受支持

有关更多信息，请参考以下内容： https://css-tricks.com/almanac/properties/p/position/

Answer 2

您可以通过在文本中添加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>

滚动时如何使一个项目div移动而其他项目不移动？

2 个答案: