我有这个 JS 代码，用于在从页面顶部向下滚动时添加和删除类，但我想要做的是当您接近页面末尾或返回时消失一些滚动后恢复到旧状态（例如，从右：7px 到右：-150px）。我复制了相同的JS代码并更改了scrollTop > rollBottom，但它不起作用。
1
788jQuery(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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
您可以使用
window.innerHeight在滚动底部执行计算。根据您的需要进行调整。
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; }