1

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

有任何想法吗？谢谢。

4

2 回答 2

1

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

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

于 2013-07-04T16:58:36.633 回答
0

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

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

于 2012-10-24T19:26:45.757 回答