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');
    }
});

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

Waypoint在Ajax加载的内容上无法识别

2 个答案: