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

Question

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

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

谢谢！

Answer 1

这是一个JSFiddle 演示

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

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.");
    }
}