Yakalanmamış TypeError: Tanımsız 'top' özelliği okunamıyor

Bu soru zaten yanıtlanmışsa özür dilerim. Çözümleri aramayı denedim, ancak koduma uygun herhangi bir çözüm bulamadım. Hala jQuery'de yeniyim.

İki farklı sayfa için iki farklı türde yapışkan menülerim var. İşte her ikisinin kodu.

$(document).ready(function () {
    var contentNav = $('.content-nav').offset().top;
    var stickyNav = function () {
        var scrollTop = $(window).scrollTop();
        if (scrollTop > contentNav) {
            $('.content-nav').addClass('content-nav-sticky');
        } else {;
            $('.content-nav').removeClass('content-nav-sticky')
        }
    };
    stickyNav();
    $(window).scroll(function () {
        stickyNav();
    });
});
$(document).ready(function () {
    var stickyNavTop = $('.nav-map').offset().top;
    // var contentNav = $('.content-nav').offset().top;
    var stickyNav = function () {
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('.nav-map').addClass('sticky');
            // $('.content-nav').addClass('sticky');
        } else {
            $('.nav-map').removeClass('sticky');
            // $('.content-nav').removeClass('sticky')
        }
    };
    stickyNav();
    $(window).scroll(function () {
        stickyNav();
    });
});

Benim sorunum, alttaki yapışkan yan menünün kodunun çalışmaması, çünkü kodun ikinci satırının var contentNav = $('.content-nav').offset().top;"Yakalanmamış TypeError: Tanımsız 'üst' özelliği okunamıyor" yazan bir hata tetiklemesi. Aslında, ikinci satırın altındaki hiçbir jQuery kodu, üstüne yerleştirilmedikçe hiç çalışmaz.

Biraz araştırma yaptıktan sonra, bence sorun, $('.content-nav').offset().topbelirtilen seçicinin farklı bir sayfada olması nedeniyle bulunamaması. Öyleyse bir çözüm bulamıyorum.

JQuery nesnesinin ofsetini almaya çalışmadan önce herhangi bir öğe içerip içermediğini kontrol edin:

var nav = $('.content-nav');
if (nav.length) {
  var contentNav = nav.offset().top;
  ...continue to set up the menu
}

Belgeniz sınıflı herhangi bir öğe içermez content-nav, bu nedenle yöntem .offset(), aslında özelliği olmayan tanımsız döndürür top.

Bu kemanla kendin görebilirsin

alert($('.content-nav').offset());

("tanımsız" göreceksiniz)

Tüm kodun çökmesini önlemek için bunun yerine böyle bir koda sahip olabilirsiniz:

var top = ($('.content-nav').offset() || { "top": NaN }).top;
if (isNaN(top)) {
    alert("something is wrong, no top");
} else {
    alert(top);
}

Güncellenmiş keman .

Bunun çok eski olduğunu biliyorum, ancak bu hata türünün yeni başlayanlar için yaygın bir hata olduğunu anlıyorum, çünkü çoğu yeni başlayanlar, başlık öğeleri yüklendikten sonra işlevlerini çağıracaklar. Bu çözümün bu başlıkta hiç ele alınmadığını görünce, onu ekleyeceğim. Bu javascript işlevinin gerçek html yüklenmeden önce yerleştirilmiş olması çok muhtemeldir . Unutmayın, belge hazır olmadan javascript'inizi hemen çağırırsanız, belgeden bir öğe gerektiren öğeler tanımlanmamış bir değer bulabilir.

Muhtemelen yaşadığınız problem, sayfanın herhangi bir yerinde mevcut olmayan bir bağlantıya bir bağlantı olmasıdır. Örneğin, aşağıdakilere sahip olduğunuzu varsayalım:

<a href="#examples">Skip to examples</a>

Sayfada bu kimliğe sahip bir öğe olması gerekir, örneğin:

<div id="examples">Here are the examples</div>

Bu nedenle, bağlantıların her birinin sayfa içinde karşılık gelen çapa ile eşleştiğinden emin olun.

Benzer bir sorunla karşılaştım ve altbilgi ofsetini almaya çalıştığımı fark ettim, ancak betiğimi altbilgiden önce bir div içine yüklüyordum. Bunun gibi bir şeydi:

<div> I have some contents </div>
<script>
  $('footer').offset().top;
</script>
<footer>This is footer</footer>

Yani sorun şu ki, altbilgi yüklenmeden önce altbilgi öğesini çağırıyordum.

Ben altbilgi altına senaryomu aşağı itti ve iyi çalıştı!

<a>Etikete her tıkladığınızda bu hata görünürse . Aşağıdaki kodu deneyin.

DOĞRU:

<a href="javascript:void(0)">

Bu arıza, href'iniz <a>etiketinizin içinde # olarak ayarlandığı için oluşur . Temel olarak, uygulamanız var olmayan href'i bulmaya çalışıyor. Boş href ayarlamanın doğru yolu yukarıda gösterilmiştir.

YANLIŞ:

<a href="#">

Ben de aynı sorunu yaşadım ("Yakalanmamış TypeError: Tanımsız 'üst' özelliği okunamıyor")

Bulabildiğim her çözümü denedim ve yardımcı olduğunu belirttim. Ama sonra DIV'min iki kimliği olduğunu fark ettim.

Bu yüzden ikinci kimliği kaldırdım ve işe yaradı.

Keşke biri daha önce kimliklerimi kontrol etmemi söyleseydi))