Question

这是我在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");
    }
});

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

Answer 1

Waypoints使用事件（waypoint.reached）来触发回调。 JavaScript中的事件泡沫。因此，如果您有嵌套的航点，例如#bLineDigital是#digital的后代，那么点击嵌套的航点将触发该事件并触发外部航点。你只需要停止冒泡。嵌套处理程序中的event.stopPropagation()可以解决问题。

jQuery Waypoints - 函数似乎相互重叠

1 个答案: