TypeError：無法讀取未定義jQuery的屬性“ top”

Question

我正在使用此代碼在#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 
  }
});

Answer 1

問題是因為在DOM准備就緒之前，當您嘗試使用#header1元素時， offset()不返回任何內容。 要解決此問題，請將代碼移到document.ready處理程序內。

還要注意，不建議使用bind() ，而應使用on() ，並且可以通過將toggleClass()與布爾值一起使用來簡化addClass() / removeClass()邏輯。

$(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確保這些選擇器正確。