Bagaimana untuk Membuat Div Melekat ke Bahagian Atas Skrin pada Tatal?

Cara Membetulkan Div ke Bahagian Atas Skrin pada Tatal

Apabila menatal melalui tapak web, anda mungkin mahu mengekalkan elemen tertentu pegun di bahagian atas skrin. Untuk mencapai matlamat ini, sifat CSS seperti kedudukan dan bahagian atas boleh dimanipulasi.

Penyelesaian CSS:

Anda boleh menggunakan CSS untuk menetapkan elemen pada bahagian atas skrin menggunakan kedudukan tetap:

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

Penyelesaian JavaScript:

Untuk lebih kawalan ke atas tingkah laku elemen, anda boleh menggunakan JavaScript dan fungsi scrollTop untuk mengesan tatal halaman mengimbangi. Berikut ialah contoh:

$(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 &amp;&amp; isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

Dalam kod ini, apabila mengimbangi tatal melebihi 200 piksel, kedudukan elemen ditukar kepada tetap dan apabila mengimbangi turun di bawah 200 piksel, elemen itu kembali ke kedudukan asalnya dan tidak lagi ditetapkan ke atas.

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