Bagaimanakah Saya Membetulkan Div ke Bahagian Atas Viewport pada Tatal dengan CSS?

Membetulkan Div pada Tatal dengan CSS

Soalan anda berkaitan dengan membuat div kekal tetap selepas menatal kepadanya. Seperti yang anda nyatakan, hanya menggunakan position: fixed pada div menyebabkan ia muncul sebelum ia sepatutnya pada halaman.

Nasib baik, kemajuan dalam CSS kini membenarkan fungsi ini:

div {
  position: sticky;
  top: 0;
}

The sifat kedudukan melekat memastikan bahawa div kekal tetap sebaik sahaja ia mencapai bahagian atas port pandangan, sama seperti cara iklan kedua pada 9gag berkelakuan.

Alternatif jQuery

Untuk keserasian dengan penyemak imbas lama, berikut ialah pendekatan jQuery asal:

$(window).scroll(function () {
  var scrollTop = $(window).scrollTop();
  var divOffset = $('.fixme').offset().top;

  if (scrollTop >= divOffset) {
    $('.fixme').css({
      position: 'fixed',
      top: '0',
      left: '0'
    });
  } else {
    $('.fixme').css({
      position: 'static'
    });
  }
});

Atas ialah kandungan terperinci Bagaimanakah Saya Membetulkan Div ke Bahagian Atas Viewport pada Tatal dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!