CSS position: sticky

ตำแหน่งติดตามการเลื่อน (Sticky Positioning)

position: sticky ทำให้องค์ประกอบ Verhalten ตรงตำแหน่งจนกว่าจะเลื่อนผ่านจุดที่กำหนด (top: 0) แล้วจะติดอยู่ที่ขอบวิวพอร์ต

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    div.sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      padding: 10px;
      background-color: orange;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <p>Scroll and see the effect!</p>
  <div class="sticky">Sticky!</div>
  <div style="padding-bottom:2000px">
    <p>This is demo text.</p>
    <p>Scroll down to view the sticky div.</p>
  </div>
</body>
</html>