在 Ajax 加载的内容上无法识别航点答案

【问题标题】：Waypoint unrecognized on Ajax-loaded content在 Ajax 加载的内容上无法识别航点
【发布时间】：2011-08-01 21:53:11
【问题描述】：

我正在将一个页面加载到一个 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;
});

有什么想法吗？谢谢。

【问题讨论】：

标签： ajax jquery jquery-waypoints

【解决方案1】：

使用$.waypoints('refresh');，来自文档：

这将强制根据其偏移选项重新计算每个航点的触发点。每当调整窗口大小或添加新航点时，都会自动调用此方法。 如果您的项目正在更改 DOM 或页面布局而没有执行这些操作之一，您可能需要手动调用它。

【讨论】：

我发现添加$.waypoints('refresh'); 解决了我在将AJAX 内容注入页面后未触发航点事件的问题。谢谢斯维伦。

【解决方案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');
    }
});

您必须稍微调整一下这些值才能使其在正确的位置发挥作用。此外，您必须在测试中使用大于或小于值，就好像用户在页面顶部并使用鼠标上的滚轮在页面上向下飞行一样，您不会获得介于两者之间的每个值。

【讨论】：