在Javascript中滚动时如何隐藏元素答案

【问题标题】：How to hide element when offscroll in Javascript在Javascript中滚动时如何隐藏元素
【发布时间】：2021-09-13 17:54:30
【问题描述】：

我有以下代码：

        document.addEventListener("scroll", inView);

        function inView() {
            if (document.getElementById("viewElement").getBoundingClientRect().bottom <= window.innerHeight) {
            let top = document.querySelector("#top");
            top.style.display = "block";
            }
            else{
            top.style.display = "none";
            }
        }

这个函数的作用是，当用户滚动并且页脚元素在视图中时，它显示一个具有静态位置的元素。当页脚不在视野范围内时，我想隐藏元素。最好的方法是什么？

【问题讨论】：

标签： javascript scroll display

【解决方案1】：

查看 IntersectionObserver API。它将允许您对离开视口的页脚做出反应。 https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

【讨论】：

感谢您提供此链接。我找到了解决我的问题的信息。我还观看了一段 YouTube 视频，Kevin Powell 的 Intersection Observer JavaScript API 简介，进一步解释了这一点。