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>
Anda boleh menggunakan
window.innerHeight
untuk melakukan pengiraan di bahagian bawah skrol.Sesuaikan dengan keperluan anda.