Ajax 加载内容上的路点无法识别

发布于 2024-11-27 15:42:22 字数 693 浏览 0 评论 0原文

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

什么想法吗？谢谢。

原文

I'm loading a page into a div. I'm also attempting to establish a waypoint, so that when the user scrolls down the page, the menu will change colors.

The problem I am having is the new height of the div is not recognized by the browser once the ajax content is loaded.

Here's what I have:

$(".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;
});

Any ideas? Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心安伴我暖 2024-12-04 15:42:22

使用文档中的 $.waypoints('refresh');：

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

回复收藏 0 原文

青朷 2024-12-04 15:42:22

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

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

I'm not familiar with the intrinsics of the waypoint plugin, but you could also bind a scroll event and then capture the .scrollTop() value. Would look something like this:

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

You have to play with the values a little to get it acting at the right spot. Also you have to use a greater or less than value in the test as if a user is at the top of the page and uses the scroll-wheel on his mouse to fly down the page, you don't get every value in between.

回复收藏 0 原文

~没有更多了~