html window滚动 Uncaught TypeError: Cannot read properties of undefined (reading 'top')

Question

问题遇到的现象和发生背景

页面上下滚动，所写的动画代码在控制台显示错误

用代码块功能插入代码，请勿粘贴截图

function animateF(divTop,className){
    scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    var divTopx = $("." + divTop);
    var divH = $("." + divTop).height();
    if($(document).scrollTop() > divTopx.offset().top /5*4){
        divTopx.addClass(className)
    }
    if($(document).scrollTop() >  divTopx.offset().top + divH || $(document).scrollTop() == 0){
        divTopx.removeClass(className)
    }
}
window.addEventListener("scroll",function(){
    animateF("goodList","hover");
    animateF("zigeBox","hover");
    animateF("bigtitle","hover");
    animateF("zhegnshu","hover");
    animateF("zigePhone","hover");
    animateF("liucBox.phoneShow","hover");
    animateF("theGood","hover");
},false);

运行结果及报错内容

滚动控制台报错，显示top未定义

Answer 1

offset().top是jQuery的方法，需要引入jQuery才能使用，它获取的是你绑定元素上边框相对于文档顶端的偏移量，我们可以吧文档理解成一幅图，这幅图包含了html，html内容越多图越长，浏览网页时，就是透过透明的玻璃（视窗）在看这幅画。

offsetTop是原生js的方法，它获取的是你绑定元素上边框相对离自己最近且position属性非static的祖先元素的偏移量。

有帮助的话采纳一下哦！