我正在寻找一个纯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.");
}
}