Question

我正在使用Javascript，并提供了类似的小例子

<script>
  $(window).scroll(function () {
    if ($("#aboutUs").offset().top > 100) {
      $("#aboutUs").addClass("visible");
    } else {
      $("#aboutUs").removeClass("visible");
    }
  });
</script>

我在项目中有两个页面，还有一个导航栏可以浏览每个页面。它显示如下错误：

core.js:15723 ERROR TypeError: Cannot read property 'top' of undefined   
  at <anonymous>:5:47
  at dispatch (jquery.min.js:2)
  at v.handle (jquery.min.js:2)
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
  at Object.onInvokeTask (core.js:17289)
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
  at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
  at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
  at invokeTask (zone.js:1540)
  at globalZoneAwareCallback (zone.js:1566)

当我导航到它们时，它显示出这样的错误，并且结果也不起作用。但是当我刷新页面时，它可以正常工作。我知道它显示了一个错误，因为该元素在页面上不存在。但是我确实有，刷新页面后它可以工作。如何摆脱那个错误？谢谢。

Answer 1

if ($("#aboutUs").length) {
  if ($("#aboutUs").offset().top > 100) {
    $("#aboutUs").addClass("visible");
  } else {
    $("#aboutUs").removeClass("visible");
  }
}

也许您的jquery代码在呈现视图之前正在运行，并且它无法找到ID为“ aboutUs”的元素。因此，首先检查元素是否存在，然后编写代码

JavaScript-无法读取未定义的属性“ top”

1 个答案: