如何在使用 JavaScript 滚动时修复图像？ [复制]答案

【问题标题】：How to fix the image while scrolling using JavaScript? [duplicate]如何在使用 JavaScript 滚动时修复图像？ [复制]
【发布时间】：2021-07-28 07:57:19
【问题描述】：

我想在侧边内容滚动到页脚时修复图像。

<header>
  <p>Menu</p>
</header>
<div class="col-md-8">
  <p>Some Content</p>
</div>
<div class="col-md-4">
  <img src="https://via.placeholder.com/150">
</div>
<footer></footer>

非常感谢任何帮助。

【问题讨论】：

以下答案之一是否解决了您的问题？如果是这样，请使用绿色复选标记接受其中之一。它让回答者知道您的问题已经解决。如果没有，请详细说明您仍然遇到的问题。

标签： javascript html

【解决方案1】：

您可以使用position: sticky。
然后它将是relative，直到页面滚动，它将变为fixed。

* {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 28px;
  color: white;
}

main, aside, header, footer {
  padding: 10px;
}

header, footer {
  background: #693;
}

#content {
  display: flex;
  height: 150vh;
  width: 100%;
}

main {
  background: #349;
  height: 150vh;
  flex-grow: 4;
}

aside {
  position: sticky;
  top: 0;
  height: 50vh;
  flex-grow: 1;
}

<header>
  HEADER
</header>
<div id="content">
  <main>
      MAIN
  </main>
  <aside>
    <img src="https://www.gravatar.com/avatar/8?s=80&d=identicon">
  </aside>
</div>
<footer>
  FOOTER
</footer>

【讨论】：

您可以通过将其标记为正确来表示感谢；)

【解决方案2】：

要在 scolling 时定位要修复的元素，css 中有一个简单的属性position:fixed

例如

 img {  position: fixed; }

【讨论】：