Bagaimana untuk Mencipta Div Tatal yang Melekat pada Bahagian Atas Skrin?

Mencipta Div Tatal yang Melekat pada Bahagian Atas Skrin

Apabila anda mahu elemen kekal berlabuh di bahagian atas skrin walaupun semasa tatal halaman, anda boleh membuat div "melekit". Begini caranya:

Menggunakan CSS Tulen:

.fixedElement {
    background-color: #c0c0c0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

Kaedah Ganti dengan jQuery:

Menggunakan jQuery, anda boleh mencapai kesan yang sama dengan lebih fleksibiliti. Letakkan elemen seperti berikut:

.fixedElement {
    position: absolute;
    top: 100px; // Replace with desired initial top offset
}

Kemudian, mengesan pengimbangan skrol menggunakan JavaScript:

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'absolute', 'top': '100px'}); // Adjust top offset as needed
  } 
});

Setelah mengimbangi skrol melebihi nilai yang ditentukan (200px dalam contoh ini), div akan ditetapkan di bahagian atas skrin. Apabila offset skrol jatuh di bawah nilai itu, ia akan kembali ke kedudukan asalnya.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Div Tatal yang Melekat pada Bahagian Atas Skrin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!