0

这是我在 StackOverflow 上的第一篇文章。对于 jQuery Waypoints 遇到的问题，我似乎找不到答案。（我对编码很陌生，所以如果这有一个简单的解决方案，请原谅）。

基本上我有一个单页网站，上面有 5 个部分，看起来像单独的页面。我对其进行了编码，以便当您到达每个页面的顶部时，页面的 HTML 会通过 jQuery 进行更改。然后，当您靠近该部分的底部时，下面下一部分的内容会淡入。这一切都很好。但是，当我向上滚动时，页面的 HTML 不会在我位于该部分的顶部时发生变化，而是在靠近底部时发生变化（因此使下一页上的内容淡入的点）。更重要的是，它似乎正在将其更改为上一页的标题，而不是当前页面的标题。

看看这个链接，看看我的意思： http: //lovecolour.co.nz/uploader/site1/index.html

向下滚动到橙色品牌部分。然后向上滚动，并观察当您滚动经过底部的白色虚线时 HTML 页面标题会发生什么变化。

基本上，在我看来，当您向下时它可以正常工作（当您到达页面顶部时标题会更改，当您到达该页面的近底部时内容会淡入）。但是，当您返回时，后一个函数会覆盖第一个函数，因此标题在虚线附近而不是页面顶部发生变化。

这是jQuery代码：

$("#digital .spacer").css({opacity:0})
$("#branding .spacer").css({opacity:0});
$("#print .spacer").css({opacity:0});
$("#about .spacer").css({opacity:0});

$("#clickToSee").waypoint(function(event, direction) {
    if(direction === "down") {
    $("#digital .spacer").animate({opacity: 1.0}, 200);
    }
    else {
    $("#digital .spacer").animate({opacity: 0.0}, 200);
    }
});

$("#bLineDigital").waypoint(function(event, direction) {
    if(direction === "down") {
    $("#branding .spacer").animate({opacity: 1.0}, 200);
    }
    else {
        $("#branding .spacer").animate({opacity: 0.0}, 200);
    }
});

$("#branding .dottedBottom").waypoint(function(event, direction) {
    if(direction === "down") {
    $("#print .spacer").animate({opacity: 1.0}, 200);
    }
    else {
        $("#print .spacer").animate({opacity: 0.0}, 200);
    }
});

$("#print .dottedBottom").waypoint(function(event, direction) {
    if(direction === "down") {
    $("#about .spacer").animate({opacity: 1.0}, 200);
    }
    else {
        $("#about .spacer").animate({opacity: 0.0}, 200);
    }
});

$("#digital").waypoint(function(event, direction) {
    if(direction === "down") {
    $("title").html("Digital");
    }
    else {
        $("title").html("LoveColour");
    }
});

$("#branding").waypoint(function(event, direction) {
    if(direction === "down") {
    $("title").html("Branding");
    }
    else {
        $("title").html("Digital");
    }
});
$("#print").waypoint(function(event, direction) {
    if(direction === "down") {
    $("title").html("Print");
    }
    else {
        $("title").html("Branding");
    }
});
$("#about").waypoint(function(event, direction) {
    if(direction === "down") {
    $("title").html("About LoveColour");
    }
    else {
        $("title").html("Print");
    }
});

我会很感激我能得到的所有帮助 - 我希望一切都清楚。提前致谢

4

1 回答 1

0

Waypoints 使用事件 ( waypoint.reached) 来触发回调。JavaScript 中的事件冒泡。因此，如果您有嵌套的航路点，例如#bLineDigital的后代如何#digital，击中嵌套的航路点将使该事件冒泡并触发外部事件。你只需要停止冒泡。event.stopPropagation()在嵌套的处理程序中就可以了。

于 2012-05-11T14:41:30.287 回答