AjaxをロードしたコンテンツでWaypointが認識されない

Question

divにページをロードしています。私はウェイポイントを確立しようとしているので、ユーザーがページをスクロールすると、メニューの色が変わります。

私が抱えている問題は、ajaxコンテンツが読み込まれると、divの新しい高さがブラウザによって認識されないことです。ここで

は、私が持っているものです。

$(".cta").live('click', function() { 
    $('#faq').load('about-us/faqs/index.html'), 
    function() { 
     $("#faq").waypoint(function (event, direction) { 
      if (direction === 'up') { 
       $("#siteNav li a").removeClass("siteNavSelected"); 
       $("#siteNav li.nav3 a").addClass("siteNavSelected"); 
      } 
     }, { 
      offset: function() { 
       return $.waypoints('viewportHeight') - $("#faq").outerHeight(); 
      } 

     }); 
    } 
    return false; 
}); 

任意のアイデア？ありがとう。

Answer 1

私はwaypointプラグインの組み込み関数に精通していませんが、スクロールイベントをバインドして.scrollTop()の値を取得することもできます。

$(document).bind('scroll', function(event) {   
    var scrollTop = $(window).scrollTop(); 
    if (scrollTop < 1000 && $('siteNav li').hasClass('styleA')) { return; } 
    else { 
     $('siteNav li').removeClass('styleB'); 
     $('siteNav li').addClass('styleA'); 
    } 
    if (scrollTop > 1000 && $('siteNav li').hasClass('styleB')) { return; } 
    else { 
     $('siteNav li').removeClass('styleA'); 
     $('siteNav li').addClass('styleB'); 
    } 
}); 

あなたは正しい値段で演技するために値を少しずつ演奏する必要があります。また、ユーザーがページの一番上にいて、マウスのスクロールホイールを使用してページを飛ばしているかのように、テストで値より大きいまたは小さい値を使用する必要があります。

Answer 2

ドキュメントから使用$.waypoints('refresh');、：

これは、そのオフセットオプションに基づいて、各ウェイポイントのトリガポイントの再計算を強制します。これは、ウィンドウのサイズが変更されるか、新しいウェイポイントが追加されるたびに自動的に呼び出されます。 プロジェクトでこれらのことを行わずにDOMまたはページレイアウトを変更している場合は、手動で呼び出すことができます。