JSFiddle - React, Tailwind, and code Playground

by arsenij00

HTML

<div class="container">
  <div class="block"></div>
  <div class="sticky-container">
    <div class="sticky-element">Прилипающий блок</div>
    <! -- после того как этот блок будет проскроллен, к sticky-element надо добавлять класс -->
    <div class="something-content"></div>
  </div>
  <div class="block"></div>
  <div class="block"></div>
</div>

CSS

body {
  width: 100vw;
  height: 100vh;
  color: #fff;
  font-size: 18px;
  font-family: 'Roboto';
}
.container {
  background: #fff;
  width: 100%;
  height: 100%;
}
.block {
  background: red;
  width: 100%;
  height: 20%;
}
.sticky-container {
  background: green;
   width: 100%;
   height: 40%;
}
.sticky-element {
  background: blue;
  width: 100%;
  height: 10%;
}