floating div accompany page scroll

Question

Would anyone have any SIMPLIFIED idea or example of how to make a floating div roll together with the scroll of the page ? Something very simple, for understanding and learning, because the ones that exist here are very confusing and I’ve been looking for this model for some time. There are those floating div s that are on the right side of the page and as the page is scrolled, the same div accompanies until the footer or until a certain point. It is just that. Who can share, I thank.

Answer 1

I don’t know if this is exactly what you need, but only with CSS you can do it using position:sticky or position:fixed or If you want to see examples over the internet you can search for "css persistent div"

See the example with position:sticky: (in this example the box starts at 120px from the top and at 50px from the top)

body {
    height: 200vh;
    background-image: url(http://placecage.com/500/500);
}
.teste {
    background-color: red;
    width: 100px;
    height: 50px;
    margin-top: 140px; /* altura que está do topo */
    top: 50px; /* altura que vai parar antes do topo */
    position: sticky;
}

<div class="teste"></div>

---

See the example with position:fixed:

body {
    height: 200vh;
    background-image: url(http://placecage.com/500/500);
}
.box {
    width: 100px;
    height: 100px;
    position: fixed;
    z-index: 1000;
    left: 1rem;
    top: 1rem;
    background-color: #f00;
}

<div class="box"></div>

Here’s Mozilla’s documentation on positioning elements with CSS https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

Dude I made an example well even basic, I think more basic than this impossible. scroll the slider to see the result. I only used the property display with the value Fixed.

div {
  height:900px;
}
.fixed {
  position: fixed;
  background-color: red;
}

<div>
  <h1 class="fixed">TESTE</h1>
</div>