Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memastikan DIV Tetap di Tempat Semasa Menatal?

Bagaimana untuk Memastikan DIV Tetap di Tempat Semasa Menatal?

Patricia Arquette
Patricia Arquetteasal
2024-11-21 03:53:13794semak imbas

How to Keep a DIV Fixed in Place While Scrolling?

Bagaimana untuk Mengunci DIV di Tempat pada Tatal?

Jika anda mempunyai DIV yang muncul kemudian pada halaman, anda mungkin mahukannya untuk kekal di tempatnya sebaik sahaja ia kelihatan selepas menatal. Untuk mencapai ini, menggunakan CSS sahaja sebelum ini adalah mustahil. Walau bagaimanapun, kemajuan CSS kini menjadikannya boleh dilaksanakan.

Untuk penjelasan yang lebih terperinci, rujuk jawapan Stack Overflow ini: https://stackoverflow.com/a/53832799/1482443

Jika anda lebih suka penyelesaian jQuery, pertimbangkan contoh berikut:

var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
  var currentScroll = $(window).scrollTop();
  if (currentScroll >= fixmeTop) {
    $('.fixme').css({
      position: 'fixed',
      top: '0',
      left: '0'
    });
  } else {
    $('.fixme').css({
      position: 'static'
    });
  }
});

Kod jQuery ini membolehkan anda membetulkan kedudukan DIV dengan kelas "fixme" sebaik sahaja anda menatal melepasi kedudukan asalnya.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan DIV Tetap di Tempat Semasa Menatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn