Bagaimana untuk Menunjukkan Div pada Tatal Selepas 800px?

Tunjukkan Div pada Tatal ke Bawah selepas 800px

Pengenalan

Artikel ini akan menangani isu memaparkan div tersembunyi apabila menatal ke bawah melepasi titik yang ditentukan pada halaman web. Matlamatnya adalah untuk mencapai ini selepas pengguna menatal 800 piksel dari bahagian atas halaman, sambil memastikan div disembunyikan semasa menatal semula ke atas dan ketinggian skrol kurang daripada 800 piksel.

Struktur HTML

HTML untuk div yang dimaksudkan adalah seperti berikut:

<div class="bottomMenu">
  <!-- Content -->
</div>

CSS Penggayaan

CSS berikut digunakan pada div:

.bottomMenu {
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  position: fixed;
  bottom: 0px;
  z-index: 100;
  opacity: 0;
}

Skrip jQuery

Skrip jQuery yang disediakan pada mulanya:

$(document).ready(function() {
    $(window).scroll( function(){
        $('.bottomMenu').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
        }); 
    });
});

Skrip jQuery yang disemak untuk Kefungsian yang Diingini

Untuk mencapai kefungsian yang diingini, Skrip jQuery perlu diubah suai seperti berikut:

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

Kesimpulan

Skrip jQuery yang disemak ini akan menunjukkan div selepas menatal ke bawah lebih daripada 800 piksel dari bahagian atas halaman. Apabila menatal ke atas dan ketinggian tatal kurang daripada 800 piksel, div akan disembunyikan.

Atas ialah kandungan terperinci Bagaimana untuk Menunjukkan Div pada Tatal Selepas 800px?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!