javascript - 仅在滚动过去元素 javascript 后触发事件

Question

我正在寻找一种仅用于检测我的窗口何时向上滚动超过某个元素(如 div)然后触发事件的 javascript 解决方案。特别是，一旦我滚动过这个元素，我需要显示一个导航栏。

我不能使用 Jquery 或其他库。纯JS。

谢谢!

Answer 1

这是 JSFiddle Demo

您需要选择要作为目标的元素。

var someElement = document.querySelector('whatever');

然后你需要设置一个 scroll window 上的事件监听器对象本身，每次用户滚动时都会触发，然后只需运行 if用于检查屏幕顶部的元素是否大于或等于 0 的语句，如果 true运行以下代码块。

window.onscroll = function(){
    //TOP
    if(someElement.getBoundingClientRect().top <= 0){
        console.log("TRIGGER: top of div reached.");
    }
    //BOTTOM
    if(someElement.getBoundingClientRect().bottom <= 0){
        console.log("TRIGGER: bottom of div reached.");
    }
}