JS 距离底部某盒子一定距离则隐藏

最新推荐文章于 2024-07-30 10:56:44 发布

小小优化师 anny

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量105

点赞数 2

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/q28000/article/details/139668226

版权

JS 距离底部某盒子一定距离则隐藏

<script>
// window.addEventListener('scroll', function() {
//     var element = document.getElementById("sidebar-h55145"); // 替换为你的元素ID
 
window.addEventListener('scroll', function() {
    var div1 = document.getElementById('sidebar-h55145');
    var div2 = document.getElementById('footer-body');
 
    
    var div1Rect = div1.getBoundingClientRect();
    var div2Rect = div2.getBoundingClientRect();
    
    // 计算两个div之间的垂直距离
    var verticalDistance = Math.abs(div2Rect.top - div1Rect.bottom);
    
    // 根据条件调整div2的显示状态
    if (verticalDistance <= 800) {
        // // 如果之前已经隐藏（此处简化处理，实际可根据需要细化逻辑）
        // if (div1.style.display === "none") {
        //     return; // 已经隐藏，避免重复操作
        // }
        div1.style.display = "none";
    } else {
        // 确保在不满足条件时恢复显示
        //div1.style.display = "block";
    }
});


</script>