我正在寻找一个纯JavaScript的解决方案,以检测我的窗口何时向上滚动超过某个元素(例如div),然后触发事件。特别是,滚动到该元素之后,我需要显示一个导航栏。

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

谢谢!

最佳答案

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

10-05 21:05
查看更多