JSFiddle - React, Tailwind, and code Playground

by Tìm ở đây Khoá học CNTT

HTML

<p>Cố gắng <b> Scroll </b> bên trong khung này để hiểu cách định vị cố định hoạt động.</p>
<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>Trong ví dụ này, phần tử dính dính vào đầu trang (top: 0), khi bạn đến vị trí cuộn của nó.</p>
  <p>Cuộn lại để loại bỏ độ dính.</p>
  <p>Một số văn bản để kích hoạt tính năng cuộn .. Lorem ipsum dolor sit amet, Illumicones no quo, maluisset finishaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Đối tác labramus repudiandae n et. In đậm hiệu quả quảng cáo của anh ấy. Eum no moltiae voluptatibus.</p>
  <p>Một số văn bản để kích hoạt tính năng cuộn .. Lorem ipsum dolor sit amet, Illumicones no quo, maluisset finishaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Đối tác labramus repudiandae n et. In đậm hiệu quả quảng cáo của anh ấy. Eum no moltiae voluptatibus.</p>
</div>

CSS

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}