滚动浏览元素javascript后触发事件

Question

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

我无法使用Jquery或其他库。简单JS。

谢谢！

Answer 1

这是 JSFiddle Demo

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

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

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

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