Would anyone have any ideas or SIMPLIFIED examples of how to make a floating div scroll along with the page scroll? Something very simple, for understanding and learning, because the existing ones here are very confusing and I have been seeking this model for some time. There are those floating divs that are on the right side of the page and as the page is rolled, the same div accompanies to the footer or to a certain point. It's just that. Anyone who can share, thank you.
floating div accompany scroll page
2
asked by anonymous 02.05.2018 / 23:21
2 answers
0
I do not know if this is exactly what you need, but only with CSS you can do using position:sticky or position:fixed or If you want to see examples through the internet you can search for "css persistent div"
See example with position:sticky : (in this example the box starts at 120px from the top and 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 is the Mozilla documentation on positioning elements with CSS link
02.05.2018 / 23:32
0
Dude I did an example well even, I think it's more basic than this impossible. roll the bar to see the result. I used only the display property with the fixed value.
div {
height:900px;
}
.fixed {
position: fixed;
background-color: red;
}<div>
<h1 class="fixed">TESTE</h1>
</div>
02.05.2018 / 23:32