javascript - TypeError:无法读取未定义jQuery的属性“top”

我正在使用此代码在#header1 div之后使导航保持粘性。它对我来说很好，但问题是我的控制台显示错误


  未捕获的TypeError：无法读取未定义的属性“ top”


请为我提供一些解决方案。谢谢

$(document).ready(function () {
  $(window).bind('scroll', function () {
    var navHeight = $(".header1").height();
    ($(window).scrollTop() > navHeight) ? $('.afterLgnRow').addClass('goToTop') : $('.afterLgnRow').removeClass('goToTop');
  });
});

$('.afterLgnRow').affix({
  offset: {
    top: $('#header1').offset().top
  }
});

最佳答案

问题是因为在DOM准备就绪之前，当您尝试使用offset()元素时，#header1没有返回任何内容。要解决此问题，请将代码移到document.ready处理程序内。

另请注意，不建议使用bind()，而应使用on()，并且可以通过将addClass()与布尔值一起使用来简化removeClass() / toggleClass()逻辑。

$(document).ready(function () {
  $(window).on('scroll', function () {
    var navHeight = $(".header1").height();
    $('.afterLgnRow').toggleClass('goToTop', $(window).scrollTop() > navHeight);
  });

  $('.afterLgnRow').affix({
    offset: {
      top: $('#header1').offset().top
    }
  });
});

我还注意到，您同时访问#header1和.header1-确保这些选择器正确。

关于javascript - TypeError:无法读取未定义jQuery的属性“top”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56789522/