無法在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

使用$.waypoints('refresh'); ，來自文檔：

這將根據其偏移選項強制重新計算每個航路點的觸發點。 每當調整窗口大小或添加新的航路點時，都會自動調用此方法。 如果您的項目在不執行以下任何一項操作的情況下更改了DOM或頁面布局，則可能需要手動調用它。

Answer 2

我不熟悉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');
    }
});

您必須稍微考慮一下這些值，才能使其在正確的位置起作用。 另外，您必須在測試中使用大於或小於值，就像用戶在頁面頂部並使用鼠標上的滾輪向下滾動頁面一樣，您不會在這兩個值之間得到所有值。