JSFiddle - React, Tailwind, and code Playground

by Alexey Zakharov

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div data-sticky-container class="container">
  <div data-sticky-container class="sticki first js-block">
  <div>
    <img src="https://rm-content.s3.amazonaws.com/5c5f65bf1b6eb034b5a679d1/1310956/upload-7c456a4a-47ce-4bbd-a1bb-cb1ccb02c7d6.png" alt="">
  </div>
  <div class="button js-block">
     кнопка
  </div>
</div>
<div class="sticki second js-block">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nihil incidunt magnam minima cupiditate repudiandae aspernatur quas, dolores iste eum adipisci fugiat, enim expedita provident cumque vero, molestiae, sunt ratione.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea doloribus sit quasi, sequi ducimus officiis, facere eaque nobis voluptatem nulla deserunt laborum totam iste libero placeat voluptas nemo itaque ipsa.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta ipsum tenetur praesentium minus beatae saepe est accusantium culpa, maiores harum eligendi quia repudiandae dolor magnam voluptas consequuntur possimus. Aliquid, optio!
</div>
<div class="sticki third js-block">
  <img src="https://rm-content.s3.amazonaws.com/5c5f65bf1b6eb034b5a679d1/1310956/upload-6ed7ed86-788f-485d-abf4-924b2cdea533.png" alt="">
</div>
<div class="test">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora voluptate ex, deserunt deleniti reprehenderit ut doloribus ducimus fuga rem aliquid laboriosam aperiam quis explicabo, est. Earum officia veniam commodi explicabo?
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, cum aliquid assumenda voluptas, fuga vel unde consequuntur repellat inventore ducimus veritatis! Ea nobis laborum veniam, nisi dolore accusamus debitis ducimus?
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque qui accusantium, minus perspiciatis ad, quam id cum velit repellendus repudiandae quos culpa assumenda ducimus tempore a error atque sequi...

CSS

.container {
  width: 375px;
}
.sticki {
 position: sticky;
  top: 0;
  background: #fff;
}
.test {
  background: #fff;
  position: relative;
  z-index: 1;
}
.button {
  text-align: center;
  background: #000;
  color: #fff;
  position: sticky;
}

JavaScript

$('.js-block').addClass('qqq');