Bagaimana untuk Memastikan Div Tetap di Bahagian Atas Skrin pada Tatal?

Membetulkan Kedudukan Div di Bahagian Atas Skrin pada Tatal

Untuk mencipta div yang melekat pada bahagian atas skrin sekali ia ditatal ke, anda boleh menggunakan sifat kedudukan CSS. Pertimbangkan coretan CSS berikut:

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

Edit:

Untuk memastikan elemen melekat dengan betul, ia pada mulanya harus menetapkan kedudukannya kepada mutlak. Setelah mengimbangi tatal dokumen mencapai sempadan atas elemen, anda boleh menukar kedudukannya secara dinamik kepada tetap dan menetapkan semula sifat teratasnya kepada 0.

Coretan kod JavaScript berikut menunjukkan cara untuk mencapainya menggunakan fungsi scrollTop:

$(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'});
  }
});

Apabila pengimbangan skrol melebihi 200 piksel, elemen akan tetap di bahagian atas tetingkap penyemak imbas.

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