How to fix the image while scrolling using JavaScript?

Question

I want to fix the image while the side content will scroll and until the footer.

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

Any help is much appreciated.

Did one of the answers below solve your problem? If so, please accept one of them using the green check mark. It lets the answerers know that your problem has been solved. If not, please expand on what problems you are continuing to have. — Timothy Alexis Vass, Jul 29 '21 at 14:58

score 2 · Answer 1 · edited Jan 24 '23 at 07:40

2

To position an element to fix while scolling, there is a simple property available in css position:fixed

for example

 img { position: fixed; }

edited Jan 24 '23 at 07:40

Timothy Alexis Vass

2,526
2
11
30

answered Jul 28 '21 at 08:05

Abdul Rehman

29
4

score 1 · Accepted Answer · answered Jul 28 '21 at 08:05

You can use position: sticky.
Then it will be relative until page is scrolled, where it will become 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>

You can thank by marking it as correct ;) – Timothy Alexis Vass Jul 28 '21 at 08:08 — Timothy Alexis Vass, Jul 28 '21 at 08:08

How to fix the image while scrolling using JavaScript?

2 Answers2