时间戳

首页 > 解决方案 > 如何在滚动时让一个项目 div 移动而其他项目不移动？

javascript - 如何在滚动时让一个项目 div 移动而其他项目不移动？

问题描述

我有这个网站： 在此处输入图像描述

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

标签： javascripthtmlcss

解决方案

您可以使用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/

推荐阅读