javascript - jquery / javascript のバグを修正できない

Question

firebug chrome でいくつかの問題を拾っている jquery コードがいくつかあります。

フィドルを更新してください。

フィドルとのリンクを参照してください。

http://jsfiddle.net/jwhTd/

画像

    /*  SHOW CATEGORIES
    ===================================================================*/

$('.normal-btn\.interest').click(function(e){
   // Prevent the event from bubbling up the DOM tree
   e.stopPropagation();
   $('.categories-wrap').fadeIn(); // must be hidden, to fade in
});
$(document, '.normal-btn\.interest').click(function(){
    $('.categories-wrap').fadeOut(); // must be visible, to fade out
});


var offset = $(".sticky-header").offset();
var sticky = document.getElementById("sticky-header")
var additionalPixels = 50;

$(window).scroll(function () {
    if ($(window).scrollTop() > offset.top - additionalPixels) {
        $('#profile-container').addClass('fixed');
    } else {
        $('#profile-container').removeClass('fixed');
    }
});

Answer 1

そのコードのほとんどはdocument.ready. var offset = $(".sticky-header").offset();dom の準備ができたら実行する必要があります。

Answer 2

あなたのコード:

var offset = $(".sticky-header").offset();
var sticky = document.getElementById("sticky-header")
var additionalPixels = 50;

最初の行は、クラスが のすべての要素を選択し、最初の要素sticky-headerのオフセットを取得します。セレクターがゼロ要素と一致する場合、.offset()関数は戻りますundefined。これは、後で発生するエラーのためにここに当てはまるようです。

次の行では、 idの要素を選択しています。sticky-headerこれにより、おそらく最初の行は

var offset = $('#sticky-header').offset();

代わりに、クラス セレクターではなく ID セレクターを使用します。