Bagaimana untuk Membetulkan Div ke Bahagian Atas Skrin pada Tatal?

Membetulkan Div ke Bahagian Atas Skrin Pada Tatal

Elemen meletakkan pada halaman web boleh meningkatkan pengalaman dan organisasi pengguna. Satu senario biasa melibatkan membetulkan div ke bahagian atas skrin apabila ia mencapai titik tatal tertentu.

Untuk mencapainya, terdapat pelbagai pendekatan, salah satunya melibatkan penggunaan CSS secara eksklusif. Dengan menetapkan kedudukan elemen kepada tetap, ia akan kekal berlabuh pada bahagian atas skrin sebaik sahaja ia ditatal ke:

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

Walau bagaimanapun, pendekatan ini menganggap bahawa elemen pada mulanya diletakkan secara mutlak. Apabila mengimbangi tatal yang diingini dipenuhi, kedudukannya hendaklah ditukar kepada tetap, dan sifat teratas hendaklah ditetapkan semula kepada sifar. Untuk menentukan offset skrol, JavaScript boleh digunakan untuk memantau fungsi scrollTop dokumen:

$(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': 'static', 'top': '0px'}); 
  } 
});

Dalam skrip ini, apabila offset skrol mencapai 200 piksel, elemen beralih ke kedudukan tetap di bahagian atas daripada skrin. Apabila offset jatuh di bawah 200 piksel, elemen kembali ke kedudukan sebelumnya. Teknik ini membolehkan peralihan yang lancar bagi div semasa pengguna menatal halaman.

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