1
I liked the display of ads in the sidebar of this site https://exercicios.mundoeducacao.bol.uol.com.br/exercicios-gramatica/exercicios-sobre-os-tipos-predicado-predicativo.htm
When scrolling the page down, the fixed block for a few pixels until another appears and stays fixed until certain pixels.
Does anyone have any idea how to do that?
1
There is a way to do this only with CSS and is practically the same, I do not know if it is the technique they used there, but qq way using only CSS you save a good Kbs and it is easier to maintain.
The main thing here is to place each ad .add with position:sticky, and each ad goes within one container tall 100vh. Like the sticky is relative to the parent, and each pair is 100% the height of the viewport so you do the scroll this father goes "leaving" the page, however the .add remains in place, but when the father leaves the whole page, his son .add also leaves, giving way to the next container with its respective .add
Follow the image code above
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
main {
display: flex;
}
section {
height: 400vh;
background-image: linear-gradient(green, orange);
}
aside .box .add {
width: 100px;
height: 100px;
background-color: red;
position: sticky;
top: 0px;
}
aside .box .add.x {
height: 150px;
background-color: blue;
}
aside .box {
border: 1px solid #ddd;
box-sizing: border-box;
height: 100vh;
}
aside {
position: sticky;
top: 0;
}<main>
<section>
avbfd
</section>
<aside>
<div class="box">
<div class="add">123</div>
</div>
<div class="box">
<div class="add x">456</div>
</div>
<div class="box">
<div class="add">789</div>
</div>
</aside>
</main>Browser other questions tagged javascript html jquery
You are not signed in. Login or sign up in order to post.
very good guy, but on the site link the last one gets fixed and does not pass the footer div, in any case I will look at this css.
– Rod
position: Sticky; - did not know.
– Rod
@Rod to stay the way you want you can take this class
aside .box .add { }and leave only asaside .add { }after in the last . add, we have 3 in the example. The last . add take it from inside the .box. Type leave the last . add always outside the div . box Ex:<div class="box">
 <div class="add x">456</div>
 </div>
 <div class="add">789</div>any doubt comments there– hugocsl
Here you can find the Mozilla documentation on position:Sticky https://developer.mozilla.org/en-US/docs/Web/CSS/position but on Google you can find much more material on this, it is worth a search!
– hugocsl
thanks Ugo, in the link example the blocks go a few pixels vertically and stay fixed for a while, which increases the crt.
– Rod
I’ll read everything calmly.
– Rod
Dude, I was seeing in the small frame, opening now the run on large page I saw that it is perfect. I will use. Thanks even.
– Rod
If you want to control the distance that . add to the top, just in the class
aside .addwhere it has top:0, you put top:20px for example, there goes to the top 20px– hugocsl
blz. has as the last to stop being fixed when it reaches the footer, for example? to not overlap.
– Rod
@Rod with CSS does not, but for this to happen your footer has to be quite high.... What you can do is use some kind of JS/jQuery to fadeOut when you get to the bottom of the page, but of JS I don’t know anything, I can’t help you much in this
– hugocsl
Thanks a lot, you helped a lot.
– Rod