Ich habe diesen JS-Code zum Hinzufügen und Entfernen von Klassen, wenn ich vom oberen Rand der Seite nach unten scrolle, aber ich m?chte ihn verschwinden lassen, wenn Sie sich dem Ende der Seite n?hern, oder nach einigem Scrollen zurückgehen und zum Alten zurückkehren Zustand (z. B. von rechts :7px nach rechts: -150px). Ich habe den gleichen JS-Code kopiert und ge?ndert scrollTop > rollBottom
, aber es funktioniert nicht.
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>
您可以使用 window.innerHeight
在滾動(dòng)底部執(zhí)行計(jì)算。
根據(jù)您的需要進(jìn)行調(diào)整。
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; }