Elemen mesti hilang apabila halaman menghampiri penghujung
P粉463418483
P粉463418483 2024-03-29 23:04:00
0
1
384

Saya mempunyai kod JS ini untuk menambah dan mengalih keluar kelas apabila menatal ke bawah dari bahagian atas halaman, tetapi apa yang saya mahu lakukan ialah hilang apabila anda hampir ke penghujung halaman atau kembali selepas menatal dan kembali ke keadaan lama (cth. dari kanan :7px ke kanan: -150px). Saya menyalin kod JS yang sama dan menukar scrollTop > rollBottom tetapi ia tidak berfungsi.

jQuery(document).on('scroll', (e) => {
  if (document.body.scrollTop > 120 || document.documentElement.scrollTop > 350) {
    console.log('now');
    jQuery('.ast-below-header-bar').addClass('filterr');
  } else {
    console.log('no');
    jQuery('.ast-below-header-bar').removeClass('filterr');
  }
})
body {
  height: 500vh
}

.ast-below-header-bar {
  display: grid;
  position: fixed;
  right: -150px;
  top: 14%;
  background: red;
  height: 200px;
  width: 200px;
  transition: .3s;
}

.ast-below-header-bar.filterr {
  right: 7px!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ast-below-header-bar"></div>

P粉463418483
P粉463418483

membalas semua(1)
P粉512526720

Anda boleh menggunakan window.innerHeight untuk melakukan pengiraan di bahagian bawah skrol.

Sesuaikan dengan keperluan anda.

jQuery(document).on('scroll', (e) => {
  if ((window.innerHeight + window.pageYOffset + 350)  350) {
    console.log('now');
    jQuery('.ast-below-header-bar').addClass('filterr');
  } else {
    console.log('no');
    jQuery('.ast-below-header-bar').removeClass('filterr');
  }
})
body {
  height: 500vh
}

.ast-below-header-bar {
  display: grid;
  position: fixed;
  right: -150px;
  top: 14%;
  background: red;
  height: 200px;
  width: 200px;
  transition: .3s;
}

.ast-below-header-bar.filterr {
  right: 7px!important;
}
sssccc
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan