Bagaimana untuk Membuat Elemen DIV Ditetapkan pada Tatal?

Cara Meletakkan DIV Tetap pada Tatal

Pertanyaan ini meneroka cara membuat div kekal tetap selepas menatal ke titik tertentu pada muka surat. Ideanya adalah untuk mencipta kesan yang serupa dengan iklan kedua di tapak web seperti 9gag, yang kelihatan tetap semasa anda menatal ke bawah melepasi titik tertentu.

Walaupun CSS sahaja tidak menyediakan penyelesaian buat masa ini, gabungan CSS dan JavaScript boleh mencapai kesan ini.

Menggunakan pendekatan jQuery:

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

Dalam kod ini, fixme mewakili DIV untuk diposisikan tetap. Pendekatan ini menambahkan pendengar acara yang menjejaki kedudukan tatal dan membandingkannya dengan kedudukan awal DIV. Apabila kedudukan tatal melebihi kedudukan awal DIV, kedudukan sifat CSS, atas dan kiri ditetapkan untuk menetapkan DIV pada tempatnya. Jika tidak, kedudukan sifat CSS ditetapkan kepada statik untuk membolehkan DIV menatal secara normal.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Elemen DIV Ditetapkan pada Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!