JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">Текст
</div>
</body>
CSS
body {margin:0;padding:0;background-color:#cecece;min-height:1000px;}
.div1 {
width:100%;
height:70px;
top: 0;
position: fixed;
z-index:1;
background-color: #fff;
}
.div1.sm {
height:50px;
}
.div2 {
width:100%;
height:70px;
top: 70px;
position: fixed;
z-index:1;
background-color: #000;
}
.div2.sm {
height:50px;
top: 50px;
}
.div3 {margin-top: 140px;
}
JavaScript
$(window).scroll(function() {
if ($(window).scrollTop() > 70) {
$(".div1, .div2").addClass("sm");
} else {
$(".div1, .div2").removeClass("sm");
}
});