Cara membuat: tajuk tetap saat menggulir

Belajar cara menggunakan CSS dan JavaScript untuk membuat tajuk tetap saat menggulir.

Coba sendiri

Buat tajuk tetap saat menggulir

Langkah pertama - tambahkan HTML：

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

Langkah kedua - tambahkan CSS：

atur gaya tajuk halaman; tambahkan position: sticky dan top: 0 untuk membuat tajuk halaman tetap ketika di geser ke atas. 
.header {
  position: sticky;
  atas: 0;
  padding: 10px 16px;
  background: #555;
  warna: #f1f1f1;
}

Coba sendiri

atur elemen position: sticky; setelahnya, posisinya akan ditentukan berdasarkan posisi gerakan pengguna.

Elemen lepas bebas akan berubah antara lokasi relatif dan tetap menurut posisi gerakan pengguna. Sebelum mencapai posisi offset yang ditentukan di dalam area tampilan, ia tetap berada di lokasi relatif; setelah mencapai, ia akan 'menempel' di posisi itu (seperti position: fixed sama sekali).

Perhatian：Untuk membuat lokasi lepas bekerja, Anda harus setidaknya menentukan atas、kanan、bawah atau kiri 其中的一个。

Halaman yang berhubungan

Tutorial:CSS position