Tem uma forma de fazer isso só com CSS e fica praticamente igual, não sei se é a técnica que usaram lá, mas de qq forma usando apenas CSS vc economiza uns bons Kbs e fica mais fácil a manutenção.

O principal aqui é colocar cada anuncio .add
com position:sticky
, e cada anuncio vai dentro de um container
com altura de 100vh
. Como o sticky
é relativo ao pai, e cada par tem 100% da altura do viewport
assim que vc faz o scroll
esse pai vai "saindo" da página, porém o .add
permanece no lugar, mas quando o pai sai todo da página, o seu filho .add
tb sai, dando lugar ao próximo container
com o seu respectivo .add
Segue o código da imagem acima
<!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>